code.gitea.io/gitea@v1.21.7/web_src/css/base.css (about)

     1  :root {
     2    /* fonts */
     3    --fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
     4    --fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
     5    --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
     6    /* font weights - use between 400 and 600 for general purposes. Avoid 700 as it is perceived too bold */
     7    --font-weight-light: 300;
     8    --font-weight-normal: 400;
     9    --font-weight-medium: 500;
    10    --font-weight-semibold: 600;
    11    --font-weight-bold: 700;
    12    /* line-height: use the default value as "modules/normalize.css" */
    13    --line-height-default: normal;
    14    /* backgrounds */
    15    --checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
    16    --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
    17    --octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
    18    /* non-color variables */
    19    --border-radius: 4px;
    20    --border-radius-medium: 6px;
    21    --border-radius-circle: 50%;
    22    --opacity-disabled: 0.55;
    23    --height-loading: 16rem;
    24    --tab-size: 4;
    25    /* base colors */
    26    --color-primary: #4183c4;
    27    --color-primary-contrast: #ffffff;
    28    --color-primary-dark-1: #3876b3;
    29    --color-primary-dark-2: #31699f;
    30    --color-primary-dark-3: #2b5c8b;
    31    --color-primary-dark-4: #254f77;
    32    --color-primary-dark-5: #193450;
    33    --color-primary-dark-6: #0c1a28;
    34    --color-primary-dark-7: #04080c;
    35    --color-primary-light-1: #548fca;
    36    --color-primary-light-2: #679cd0;
    37    --color-primary-light-3: #7aa8d6;
    38    --color-primary-light-4: #8db5dc;
    39    --color-primary-light-5: #b3cde7;
    40    --color-primary-light-6: #d9e6f3;
    41    --color-primary-light-7: #f4f8fb;
    42    --color-primary-alpha-10: #4183c419;
    43    --color-primary-alpha-20: #4183c433;
    44    --color-primary-alpha-30: #4183c44b;
    45    --color-primary-alpha-40: #4183c466;
    46    --color-primary-alpha-50: #4183c480;
    47    --color-primary-alpha-60: #4183c499;
    48    --color-primary-alpha-70: #4183c4b3;
    49    --color-primary-alpha-80: #4183c4cc;
    50    --color-primary-alpha-90: #4183c4e1;
    51    --color-primary-hover: var(--color-primary-dark-1);
    52    --color-primary-active: var(--color-primary-dark-2);
    53    --color-secondary: #dedede;
    54    --color-secondary-dark-1: #cecece;
    55    --color-secondary-dark-2: #bfbfbf;
    56    --color-secondary-dark-3: #a0a0a0;
    57    --color-secondary-dark-4: #909090;
    58    --color-secondary-dark-5: #818181;
    59    --color-secondary-dark-6: #717171;
    60    --color-secondary-dark-7: #626262;
    61    --color-secondary-dark-8: #525252;
    62    --color-secondary-dark-9: #434343;
    63    --color-secondary-dark-10: #333333;
    64    --color-secondary-dark-11: #242424;
    65    --color-secondary-dark-12: #141414;
    66    --color-secondary-dark-13: #040404;
    67    --color-secondary-light-1: #e5e5e5;
    68    --color-secondary-light-2: #ebebeb;
    69    --color-secondary-light-3: #f2f2f2;
    70    --color-secondary-light-4: #f8f8f8;
    71    --color-secondary-alpha-10: #dedede19;
    72    --color-secondary-alpha-20: #dedede33;
    73    --color-secondary-alpha-30: #dedede4b;
    74    --color-secondary-alpha-40: #dedede66;
    75    --color-secondary-alpha-50: #dedede80;
    76    --color-secondary-alpha-60: #dedede99;
    77    --color-secondary-alpha-70: #dededeb3;
    78    --color-secondary-alpha-80: #dededecc;
    79    --color-secondary-alpha-90: #dededee1;
    80    --color-secondary-button: var(--color-secondary-dark-4);
    81    --color-secondary-hover: var(--color-secondary-dark-5);
    82    --color-secondary-active: var(--color-secondary-dark-6);
    83    /* console colors - used for actions console and console files */
    84    --color-console-fg: #eeeff2;
    85    --color-console-fg-subtle: #959cab;
    86    --color-console-bg: #262936;
    87    --color-console-border: #383c47;
    88    --color-console-hover-bg: #ffffff16;
    89    --color-console-active-bg: #454a57;
    90    --color-console-menu-bg: #383c47;
    91    --color-console-menu-border: #5c6374;
    92    /* named colors */
    93    --color-red: #db2828;
    94    --color-orange: #f2711c;
    95    --color-yellow: #fbbd08;
    96    --color-olive: #b5cc18;
    97    --color-green: #21ba45;
    98    --color-teal: #00b5ad;
    99    --color-blue: #2185d0;
   100    --color-violet: #6435c9;
   101    --color-purple: #a333c8;
   102    --color-pink: #e03997;
   103    --color-brown: #a5673f;
   104    --color-black: #1b1c1d;
   105    /* light variants - produced via Sass scale-color(color, $lightness: +25%) */
   106    --color-red-light: #e45e5e;
   107    --color-orange-light: #f59555;
   108    --color-yellow-light: #fcce46;
   109    --color-olive-light: #d3e942;
   110    --color-green-light: #46de6a;
   111    --color-teal-light: #08fff4;
   112    --color-blue-light: #51a5e3;
   113    --color-violet-light: #8b67d7;
   114    --color-purple-light: #bb64d8;
   115    --color-pink-light: #e86bb1;
   116    --color-brown-light: #c58b66;
   117    --color-black-light: #525558;
   118    /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */
   119    --color-red-dark-1: #c82121;
   120    --color-orange-dark-1: #e6630d;
   121    --color-yellow-dark-1: #e5ac04;
   122    --color-olive-dark-1: #a3b816;
   123    --color-green-dark-1: #1ea73e;
   124    --color-teal-dark-1: #00a39c;
   125    --color-blue-dark-1: #1e78bb;
   126    --color-violet-dark-1: #5a30b5;
   127    --color-purple-dark-1: #932eb4;
   128    --color-pink-dark-1: #db228a;
   129    --color-brown-dark-1: #955d39;
   130    --color-black-dark-1: #18191a;
   131    /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */
   132    --color-red-dark-2: #b11e1e;
   133    --color-orange-dark-2: #cc580c;
   134    --color-yellow-dark-2: #cc9903;
   135    --color-olive-dark-2: #91a313;
   136    --color-green-dark-2: #1a9537;
   137    --color-teal-dark-2: #00918a;
   138    --color-blue-dark-2: #1a6aa6;
   139    --color-violet-dark-2: #502aa1;
   140    --color-purple-dark-2: #8229a0;
   141    --color-pink-dark-2: #c21e7b;
   142    --color-brown-dark-2: #845232;
   143    --color-black-dark-2: #161617;
   144    /* ansi colors used for actions console and console files */
   145    --color-ansi-black: var(--color-black);
   146    --color-ansi-red: var(--color-red);
   147    --color-ansi-green: var(--color-green);
   148    --color-ansi-yellow: var(--color-yellow);
   149    --color-ansi-blue: var(--color-blue);
   150    --color-ansi-magenta: var(--color-pink);
   151    --color-ansi-cyan: var(--color-teal);
   152    --color-ansi-white: var(--color-console-fg-subtle);
   153    --color-ansi-bright-black: var(--color-black-light);
   154    --color-ansi-bright-red: var(--color-red-light);
   155    --color-ansi-bright-green: var(--color-green-light);
   156    --color-ansi-bright-yellow: var(--color-yellow-light);
   157    --color-ansi-bright-blue: var(--color-blue-light);
   158    --color-ansi-bright-magenta: var(--color-pink-light);
   159    --color-ansi-bright-cyan: var(--color-teal-light);
   160    --color-ansi-bright-white: var(--color-console-fg);
   161    /* other colors */
   162    --color-grey: #707070;
   163    --color-grey-light: #838383;
   164    --color-gold: #a1882b;
   165    --color-white: #ffffff;
   166    --color-diff-removed-word-bg: #fdb8c0;
   167    --color-diff-added-word-bg: #acf2bd;
   168    --color-diff-removed-row-bg: #ffeef0;
   169    --color-diff-moved-row-bg: #f1f8d1;
   170    --color-diff-added-row-bg: #e6ffed;
   171    --color-diff-removed-row-border: #f1c0c0;
   172    --color-diff-moved-row-border: #d0e27f;
   173    --color-diff-added-row-border: #e6ffed;
   174    --color-diff-inactive: #f2f2f2;
   175    --color-error-border: #e0b4b4;
   176    --color-error-bg: #fff6f6;
   177    --color-error-bg-active: #fbb;
   178    --color-error-bg-hover: #fdd;
   179    --color-error-text: #9f3a38;
   180    --color-success-border: #a3c293;
   181    --color-success-bg: #fcfff5;
   182    --color-success-text: #2c662d;
   183    --color-warning-border: #c9ba9b;
   184    --color-warning-bg: #fffaf3;
   185    --color-warning-text: #573a08;
   186    --color-info-border: #a9d5de;
   187    --color-info-bg: #f8ffff;
   188    --color-info-text: #276f86;
   189    --color-red-badge: #db2828;
   190    --color-red-badge-bg: #db28281a;
   191    --color-red-badge-hover-bg: #db28284d;
   192    --color-green-badge: #21ba45;
   193    --color-green-badge-bg: #21ba451a;
   194    --color-green-badge-hover-bg: #21ba454d;
   195    --color-yellow-badge: #fbbd08;
   196    --color-yellow-badge-bg: #fbbd081a;
   197    --color-yellow-badge-hover-bg: #fbbd084d;
   198    --color-orange-badge: #f2711c;
   199    --color-orange-badge-bg: #f2711c1a;
   200    --color-orange-badge-hover-bg: #f2711c4d;
   201    --color-git: #f05133;
   202    /* target-based colors */
   203    --color-body: #ffffff;
   204    --color-text-dark: #080808;
   205    --color-text: #212121;
   206    --color-text-light: #555555;
   207    --color-text-light-1: #6a6a6a;
   208    --color-text-light-2: #808080;
   209    --color-text-light-3: #a0a0a0;
   210    --color-box-header: #f7f7f7;
   211    --color-box-body: #ffffff;
   212    --color-box-body-highlight: #fafafa;
   213    --color-footer: #ffffff;
   214    --color-timeline: #ececec;
   215    --color-input-text: #212121;
   216    --color-input-background: #fafafa;
   217    --color-input-toggle-background: #dedede;
   218    --color-input-border: var(--color-secondary);
   219    --color-input-border-hover: var(--color-secondary-dark-1);
   220    --color-header-wrapper: transparent;
   221    --color-light: #00000006;
   222    --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
   223    --color-light-border: #0000001d;
   224    --color-hover: #00000014;
   225    --color-active: #0000001b;
   226    --color-menu: #fafafa;
   227    --color-card: #fafafa;
   228    --color-markup-table-row: #00000008;
   229    --color-markup-code-block: #00000010;
   230    --color-button: #fafafa;
   231    --color-code-bg: #ffffff;
   232    --color-code-sidebar-bg: #f5f5f5;
   233    --color-shadow: #00000026;
   234    --color-secondary-bg: #f4f4f4;
   235    --color-expand-button: #d8efff;
   236    --color-placeholder-text: #aaa;
   237    --color-editor-line-highlight: var(--color-primary-light-6);
   238    --color-project-board-bg: var(--color-secondary-light-4);
   239    --color-project-board-dark-label: #111111;
   240    --color-project-board-light-label: #eeeeee;
   241    --color-caret: var(--color-text-dark);
   242    --color-reaction-bg: #0000000a;
   243    --color-reaction-hover-bg: var(--color-primary-light-5);
   244    --color-reaction-active-bg: var(--color-primary-light-6);
   245    --color-tooltip-text: #ffffff;
   246    --color-tooltip-bg: #000000f0;
   247    --color-nav-bg: #ffffff;
   248    --color-nav-hover-bg: #ebebeb;
   249    --color-nav-text: var(--color-text);
   250    --color-label-text: #232323;
   251    --color-label-bg: #cacaca5b;
   252    --color-label-hover-bg: #cacacaa0;
   253    --color-label-active-bg: #cacacaff;
   254    --color-accent: var(--color-primary-light-1);
   255    --color-small-accent: var(--color-primary-light-6);
   256    --color-active-line: #fffbdd;
   257    --color-overlay-backdrop: #080808c0;
   258    accent-color: var(--color-accent);
   259    color-scheme: light;
   260  }
   261  
   262  :root * {
   263    --fonts-regular: var(--fonts-override, var(--fonts-proportional)), "Noto Sans", "Liberation Sans", sans-serif, var(--fonts-emoji);
   264  }
   265  
   266  textarea {
   267    font-family: var(--fonts-regular);
   268  }
   269  
   270  pre,
   271  code,
   272  kbd,
   273  samp {
   274    font-size: 0.9em; /* compensate for monospace fonts being usually slightly larger */
   275    font-family: var(--fonts-monospace);
   276  }
   277  
   278  b,
   279  strong,
   280  h1,
   281  h2,
   282  h3,
   283  h4,
   284  h5,
   285  h6 {
   286    font-weight: var(--font-weight-semibold);
   287  }
   288  
   289  body {
   290    color: var(--color-text);
   291    background-color: var(--color-body);
   292    tab-size: var(--tab-size);
   293    display: flex;
   294    flex-direction: column;
   295    overflow-wrap: break-word;
   296  }
   297  
   298  table {
   299    border-collapse: collapse;
   300  }
   301  
   302  button {
   303    cursor: pointer;
   304  }
   305  
   306  details summary {
   307    cursor: pointer;
   308  }
   309  
   310  details summary > * {
   311    display: inline;
   312  }
   313  
   314  progress {
   315    background: var(--color-secondary-dark-1);
   316    border-radius: var(--border-radius);
   317    border: none;
   318    overflow: hidden;
   319  }
   320  
   321  progress::-webkit-progress-bar {
   322    background: var(--color-secondary-dark-1);
   323  }
   324  
   325  progress::-webkit-progress-value {
   326    background-color: var(--color-accent);
   327  }
   328  
   329  progress::-moz-progress-bar {
   330    background-color: var(--color-accent);
   331  }
   332  
   333  * {
   334    scrollbar-color: var(--color-primary) transparent;
   335    caret-color: var(--color-caret);
   336  }
   337  
   338  ::-webkit-scrollbar {
   339    width: 10px;
   340    height: 10px;
   341  }
   342  
   343  ::-webkit-scrollbar-thumb {
   344    box-shadow: inset 0 0 0 6px var(--color-primary);
   345    border: 2px solid transparent;
   346    border-radius: var(--border-radius);
   347  }
   348  
   349  ::-webkit-scrollbar-thumb:window-inactive {
   350    box-shadow: inset 0 0 0 6px var(--color-primary);
   351  }
   352  
   353  ::-webkit-scrollbar-thumb:hover {
   354    box-shadow: inset 0 0 0 6px var(--color-primary-dark-2);
   355  }
   356  
   357  ::-webkit-scrollbar-corner {
   358    background: transparent;
   359  }
   360  
   361  ::file-selector-button {
   362    border: 1px solid var(--color-light-border);
   363    color: var(--color-text-light);
   364    background: var(--color-light);
   365    border-radius: var(--border-radius);
   366  }
   367  
   368  ::file-selector-button:hover {
   369    color: var(--color-text);
   370    background: var(--color-hover);
   371  }
   372  
   373  ::selection {
   374    background: var(--color-primary-light-1) !important;
   375    color: var(--color-white) !important;
   376  }
   377  
   378  ::placeholder,
   379  .ui.dropdown:not(.button) > .default.text,
   380  .ui.default.dropdown:not(.button) > .text {
   381    color: var(--color-placeholder-text) !important;
   382    opacity: 1 !important;
   383  }
   384  
   385  .unselectable,
   386  .button,
   387  .lines-num,
   388  .lines-commit,
   389  .lines-commit .blame-info,
   390  .ellipsis-button {
   391    -webkit-touch-callout: none;
   392    -webkit-user-select: none;
   393    user-select: none;
   394  }
   395  
   396  a {
   397    color: var(--color-primary);
   398    cursor: pointer;
   399    text-decoration-skip-ink: all;
   400  }
   401  
   402  /* muted link = only colored when hovered */
   403  /* silenced link = never colored */
   404  
   405  a.muted,
   406  a.silenced,
   407  .muted-links a {
   408    color: inherit;
   409  }
   410  
   411  a:hover,
   412  a.muted:hover,
   413  a.muted:hover [class*="color-text"],
   414  .muted-links a:hover {
   415    color: var(--color-primary);
   416  }
   417  
   418  a.silenced:hover {
   419    color: inherit;
   420    text-decoration: none;
   421  }
   422  
   423  a.label,
   424  .ui.search .results a,
   425  .ui .menu a,
   426  .ui.cards a.card,
   427  .issue-keyword a {
   428    text-decoration: none !important;
   429  }
   430  
   431  .ui.search > .results {
   432    background: var(--color-body);
   433    border-color: var(--color-secondary);
   434  }
   435  
   436  .ui.search > .results .result {
   437    background: var(--color-body);
   438  }
   439  
   440  .ui.search > .results .result .title {
   441    color: var(--color-text-dark);
   442  }
   443  
   444  .ui.search > .results .result .description {
   445    color: var(--color-text-light-2);
   446  }
   447  
   448  .ui.search > .results .result .image {
   449    width: auto;
   450    height: auto;
   451  }
   452  
   453  .ui.search > .results .result:hover,
   454  .ui.category.search > .results .category .result:hover {
   455    background: var(--color-hover);
   456  }
   457  
   458  .inline-code-block {
   459    padding: 2px 4px;
   460    border-radius: var(--border-radius-medium);
   461    background-color: var(--color-markup-code-block);
   462  }
   463  
   464  .ui.dividing.header {
   465    border-bottom-color: var(--color-secondary);
   466  }
   467  
   468  .page-content {
   469    margin-top: 15px;
   470  }
   471  
   472  .page-content .header-wrapper,
   473  .page-content .new-menu {
   474    margin-top: -15px !important;
   475    padding-top: 15px !important;
   476  }
   477  
   478  /* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */
   479  .ui.input > input {
   480    line-height: var(--line-height-default);
   481    text-align: start; /* Override fomantic's `text-align: left` to make RTL work via HTML `dir="auto"` */
   482  }
   483  
   484  /* fix Fomantic's line-height causing vertical scrollbars to appear */
   485  ul.ui.list li,
   486  ol.ui.list li,
   487  .ui.list > .item,
   488  .ui.list .list > .item {
   489    line-height: var(--line-height-default);
   490  }
   491  
   492  .ui.input.focus > input,
   493  .ui.input > input:focus {
   494    border-color: var(--color-primary);
   495  }
   496  
   497  .ui.action.input .ui.ui.button {
   498    border-color: var(--color-input-border);
   499    padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */
   500    padding-bottom: 0;
   501  }
   502  
   503  /* currently used for search bar dropdowns in repo search and explore code */
   504  .ui.action.input:not([class*="left action"]) > .ui.dropdown.selection {
   505    min-width: 10em;
   506  }
   507  
   508  .ui.action.input:not([class*="left action"]) > .ui.dropdown.selection:not(:focus,:hover) {
   509    border-right-color: transparent;
   510  }
   511  
   512  .ui.action.input:not([class*="left action"]) > input,
   513  .ui.action.input:not([class*="left action"]) > input:hover {
   514    border-right: 1px solid transparent;
   515  }
   516  
   517  .ui.action.input:not([class*="left action"]) > input:focus {
   518    border-right-color: var(--color-primary);
   519  }
   520  
   521  .ui.menu,
   522  .ui.vertical.menu {
   523    background: var(--color-menu);
   524    border-color: var(--color-secondary);
   525  }
   526  
   527  .ui.menu .item {
   528    color: var(--color-text);
   529    user-select: auto;
   530    line-height: var(--line-height-default); /* fomantic uses "1" which causes overflow problems because "1" doesn't consider the descent part */
   531  }
   532  
   533  .ui.menu .item > .svg {
   534    margin-right: 0.35em;
   535  }
   536  
   537  .ui.menu .dropdown.item:hover,
   538  .ui.menu a.item:hover,
   539  .ui.menu details.item summary:hover {
   540    color: var(--color-text);
   541    background: var(--color-hover);
   542  }
   543  
   544  .ui.menu .active.item,
   545  .ui.menu .active.item:hover,
   546  .ui.vertical.menu .active.item,
   547  .ui.vertical.menu .active.item:hover {
   548    color: var(--color-text);
   549    background: var(--color-active);
   550  }
   551  
   552  .ui.menu a.item:active {
   553    color: var(--color-text);
   554    background: none;
   555  }
   556  
   557  .ui.ui.menu .item.disabled {
   558    color: var(--color-text-light-3);
   559  }
   560  
   561  .ui.menu .item::before, .ui.vertical.menu .item::before {
   562    background: var(--color-secondary);
   563  }
   564  
   565  /* sub menu of vertical menu */
   566  .ui.vertical.menu .item .menu .item {
   567    color: var(--color-text-light-2);
   568    text-indent: 16px;
   569  }
   570  
   571  .ui.vertical.menu .item .menu .item:hover,
   572  .ui.vertical.menu .item .menu a.item:hover {
   573    color: var(--color-text-light-1);
   574  }
   575  
   576  .ui.vertical.menu .item .menu .active.item {
   577    color: var(--color-text);
   578  }
   579  
   580  /* slightly more contrast for filters on issue list */
   581  .ui.ui.menu .dropdown.item.disabled {
   582    color: var(--color-text-light-2);
   583  }
   584  
   585  .ui.dropdown .menu {
   586    background: var(--color-menu);
   587    border-color: var(--color-secondary);
   588  }
   589  
   590  .ui.dropdown .menu > .header:not(.ui) {
   591    color: var(--color-text);
   592  }
   593  
   594  .ui.dropdown .menu > .item {
   595    color: var(--color-text);
   596  }
   597  
   598  .ui.dropdown .menu > .item:hover {
   599    color: var(--color-text);
   600    background: var(--color-hover);
   601  }
   602  
   603  .ui.dropdown .menu > .item:active {
   604    color: var(--color-text);
   605    background: var(--color-active);
   606  }
   607  
   608  .ui.dropdown .menu .active.item {
   609    color: var(--color-text);
   610    background: var(--color-active);
   611    border-radius: 0;
   612    font-weight: var(--font-weight-normal);
   613  }
   614  
   615  /* fix misaligned images in webhook dropdown */
   616  .ui.dropdown .menu > .item > img {
   617    margin-top: -0.25rem;
   618    margin-bottom: -0.25rem;
   619  }
   620  .ui.dropdown .menu > .item > svg {
   621    margin-right: .78rem; /* use the same margin as for <img> */
   622  }
   623  
   624  .ui.selection.dropdown .menu > .item {
   625    border-color: var(--color-secondary);
   626  }
   627  
   628  .ui.selection.visible.dropdown > .text:not(.default) {
   629    color: var(--color-text);
   630  }
   631  
   632  .ui.dropdown.selected,
   633  .ui.dropdown .menu .selected.item {
   634    color: var(--color-text);
   635    background: var(--color-hover);
   636  }
   637  
   638  .ui.menu .ui.dropdown .menu > .selected.item {
   639    color: var(--color-text) !important;
   640    background: var(--color-hover) !important;
   641  }
   642  
   643  .ui.dropdown .menu > .message:not(.ui) {
   644    color: var(--color-text-light-2);
   645  }
   646  
   647  .ui.dropdown > .text > .description,
   648  .ui.dropdown .menu > .item > .description {
   649    color: var(--color-text-light-2);
   650  }
   651  
   652  .ui.list .list > .item .header,
   653  .ui.list > .item .header {
   654    color: var(--color-text-dark);
   655  }
   656  
   657  .ui.list .list > .item > .content,
   658  .ui.list > .item > .content {
   659    color: var(--color-text);
   660  }
   661  
   662  .ui.list .list > .item .description,
   663  .ui.list > .item .description {
   664    color: var(--color-text);
   665  }
   666  
   667  /* replace item margin on secondary menu items with gap and remove both the
   668     negative margins on the menu as well as margin on the items */
   669  .ui.secondary.menu {
   670    margin-left: 0;
   671    margin-right: 0;
   672    gap: .35714286em;
   673  }
   674  .ui.secondary.menu .item {
   675    margin-left: 0;
   676    margin-right: 0;
   677  }
   678  
   679  .ui.secondary.menu .dropdown.item:hover,
   680  .ui.secondary.menu a.item:hover {
   681    color: var(--color-text);
   682    background: var(--color-hover);
   683  }
   684  
   685  .ui.secondary.menu .active.item,
   686  .ui.secondary.menu .active.item:hover {
   687    color: var(--color-text);
   688    background: var(--color-active);
   689  }
   690  
   691  .ui.secondary.menu.tight .item {
   692    padding-left: 0.85714286em;
   693    padding-right: 0.85714286em;
   694  }
   695  
   696  /* remove the menu clearfix so that it won't add undesired gaps when using "gap" */
   697  .ui.menu::after {
   698    content: normal;
   699  }
   700  
   701  .ui.menu .dropdown.item .menu {
   702    background: var(--color-body);
   703  }
   704  
   705  .ui.menu .ui.dropdown .menu > .item {
   706    color: var(--color-text) !important;
   707  }
   708  
   709  .ui.menu .ui.dropdown .menu > .item:hover {
   710    color: var(--color-text) !important;
   711    background: var(--color-hover) !important;
   712  }
   713  
   714  .ui.menu .ui.dropdown .menu > .active.item {
   715    color: var(--color-text) !important;
   716    background: var(--color-active) !important;
   717  }
   718  
   719  /* styles from removed fomantic transition module */
   720  .hidden.transition {
   721    visibility: hidden;
   722    display: none;
   723  }
   724  .visible.transition {
   725    display: block !important;
   726    visibility: visible !important;
   727  }
   728  
   729  .ui.message {
   730    background: var(--color-box-body);
   731    color: var(--color-text);
   732    box-shadow: none !important;
   733    border: 1px solid var(--color-secondary);
   734  }
   735  
   736  .ui.info.message .header,
   737  .ui.blue.message .header {
   738    color: var(--color-blue);
   739  }
   740  
   741  .ui.info.message,
   742  .ui.attached.info.message,
   743  .ui.blue.message,
   744  .ui.attached.blue.message {
   745    background: var(--color-info-bg);
   746    color: var(--color-info-text);
   747    border-color: var(--color-info-border);
   748  }
   749  
   750  .ui.success.message .header,
   751  .ui.positive.message .header,
   752  .ui.green.message .header {
   753    color: var(--color-green);
   754  }
   755  
   756  .ui.success.message,
   757  .ui.attached.success.message,
   758  .ui.positive.message,
   759  .ui.attached.positive.message {
   760    background: var(--color-success-bg);
   761    color: var(--color-success-text);
   762    border-color: var(--color-success-border);
   763  }
   764  
   765  .ui.error.message .header,
   766  .ui.negative.message .header,
   767  .ui.red.message .header {
   768    color: var(--color-red);
   769  }
   770  
   771  .ui.error.message,
   772  .ui.attached.error.message,
   773  .ui.red.message,
   774  .ui.attached.red.message,
   775  .ui.negative.message,
   776  .ui.attached.negative.message {
   777    background: var(--color-error-bg);
   778    color: var(--color-error-text);
   779    border-color: var(--color-error-border);
   780  }
   781  
   782  .ui.warning.message .header,
   783  .ui.yellow.message .header {
   784    color: var(--color-yellow);
   785  }
   786  
   787  .ui.warning.message,
   788  .ui.attached.warning.message,
   789  .ui.yellow.message,
   790  .ui.attached.yellow.message {
   791    background: var(--color-warning-bg);
   792    color: var(--color-warning-text);
   793    border-color: var(--color-warning-border);
   794  }
   795  
   796  .ui.error.header {
   797    background: var(--color-error-bg) !important;
   798    color: var(--color-error-text) !important;
   799    border-color: var(--color-error-border) !important;
   800  }
   801  
   802  .ui.error.segment {
   803    border-color: var(--color-error-border) !important;
   804  }
   805  
   806  .ui.warning.header {
   807    background: var(--color-warning-bg) !important;
   808    color: var(--color-warning-text) !important;
   809    border-color: var(--color-warning-border) !important;
   810  }
   811  
   812  .ui.warning.segment {
   813    border-color: var(--color-warning-border) !important;
   814  }
   815  
   816  .ui.selection.active.dropdown,
   817  .ui.selection.active.dropdown:hover,
   818  .ui.selection.active.dropdown .menu,
   819  .ui.selection.active.dropdown:hover .menu {
   820    border-color: var(--color-primary);
   821  }
   822  
   823  .ui.selection.dropdown .menu {
   824    margin: 0 -1.25px;
   825  }
   826  
   827  .ui.pointing.dropdown > .menu:not(.hidden)::after {
   828    background: var(--color-menu);
   829    box-shadow: -1px -1px 0 0 var(--color-secondary);
   830  }
   831  
   832  .ui.pointing.upward.dropdown .menu::after,
   833  .ui.top.pointing.upward.dropdown .menu::after {
   834    box-shadow: 1px 1px 0 0 var(--color-secondary);
   835  }
   836  
   837  .ui.comments .comment .text {
   838    margin: 0;
   839  }
   840  
   841  .ui.comments .comment .text,
   842  .ui.comments .comment .author {
   843    color: var(--color-text);
   844  }
   845  
   846  .ui.comments .comment a.author:hover {
   847    color: var(--color-primary);
   848  }
   849  
   850  .ui.comments .comment .metadata {
   851    color: var(--color-text-light-2);
   852  }
   853  
   854  .ui.comments .comment .actions a {
   855    color: var(--color-text-light);
   856  }
   857  
   858  .ui.comments .comment .actions a.active,
   859  .ui.comments .comment .actions a:hover {
   860    color: var(--color-primary);
   861  }
   862  
   863  .ui.attached.table {
   864    border-color: var(--color-secondary);
   865  }
   866  
   867  .ui.table {
   868    color: var(--color-text);
   869    background: var(--color-box-body);
   870    border-color: var(--color-secondary);
   871    text-align: start; /* Override fomantic's `text-align: left` to make RTL work via HTML `dir="auto"` */
   872  }
   873  
   874  .ui.table th,
   875  .ui.table td {
   876    transition: none;
   877  }
   878  
   879  .ui.table > tr > td,
   880  .ui.table > tbody > tr > td {
   881    border-top-color: var(--color-secondary-alpha-50);
   882  }
   883  
   884  .ui.striped.table > tr:nth-child(2n),
   885  .ui.striped.table > tbody > tr:nth-child(2n),
   886  .ui.basic.striped.table > tbody > tr:nth-child(2n) {
   887    background: var(--color-light);
   888  }
   889  
   890  .ui.ui.ui.ui.table tr.active,
   891  .ui.ui.table td.active {
   892    color: var(--color-text);
   893    background: var(--color-active);
   894  }
   895  
   896  .ui.ui.selectable.table > tbody > tr:hover,
   897  .ui.table tbody tr td.selectable:hover {
   898    color: var(--color-text);
   899    background-color: var(--color-secondary-alpha-40);
   900  }
   901  
   902  .ui.ui.ui.ui.table tr.grey:not(.marked),
   903  .ui.ui.table td.grey:not(.marked) {
   904    background: var(--color-body);
   905    color: var(--color-text);
   906  }
   907  
   908  .ui.table > thead > tr > th {
   909    background: var(--color-box-header);
   910    border-color: var(--color-secondary);
   911    color: var(--color-text);
   912  }
   913  
   914  .ui.basic.table > tbody > tr {
   915    border-color: var(--color-secondary);
   916  }
   917  
   918  .ui.table > tfoot > tr > th,
   919  .ui.table > tfoot > tr > td {
   920    border-color: var(--color-secondary);
   921    background: var(--color-box-body);
   922    color: var(--color-text);
   923  }
   924  
   925  /* reduce table padding, needed especially for dense admin tables */
   926  .ui.table > thead > tr > th,
   927  .ui.table > tbody > tr > td,
   928  .ui.table > tr > td {
   929    padding: 6px 5px;
   930  }
   931  /* use more horizontal padding on first and last items for visuals */
   932  .ui.table > thead > tr > th:first-of-type,
   933  .ui.table > tbody > tr > td:first-of-type,
   934  .ui.table > tr > td:first-of-type {
   935    padding-left: 10px;
   936  }
   937  .ui.table > thead > tr > th:last-of-type,
   938  .ui.table > tbody > tr > td:last-of-type,
   939  .ui.table > tr > td:last-of-type {
   940    padding-right: 10px;
   941  }
   942  
   943  img.ui.avatar,
   944  .ui.avatar img,
   945  .ui.avatar svg {
   946    border-radius: var(--border-radius);
   947    object-fit: contain;
   948    aspect-ratio: 1;
   949  }
   950  
   951  .ui.divided.list > .item {
   952    border-color: var(--color-secondary);
   953  }
   954  
   955  .ui.error.message .header,
   956  .ui.warning.message .header {
   957    color: inherit;
   958    filter: saturate(2);
   959  }
   960  
   961  .full.height {
   962    flex-grow: 1;
   963    padding-bottom: 80px;
   964  }
   965  
   966  /* overwrite semantic width of containers inside the main page content div (div with class "page-content") */
   967  .page-content .ui.ui.ui.container:not(.fluid) {
   968    width: 1280px;
   969    max-width: calc(100% - 64px);
   970    margin-left: auto;
   971    margin-right: auto;
   972  }
   973  
   974  .ui.container.fluid.padded {
   975    padding: 0 32px;
   976  }
   977  
   978  /* enable fluid page widths for medium size viewports */
   979  @media (min-width: 768px) and (max-width: 1200px) {
   980    .page-content .ui.ui.ui.container:not(.fluid) {
   981      max-width: calc(100% - 32px);
   982    }
   983    .ui.container.fluid.padded {
   984      padding: 0 16px;
   985    }
   986  }
   987  
   988  @media (max-width: 767.98px) {
   989    .page-content .ui.ui.ui.container:not(.fluid) {
   990      max-width: calc(100% - 16px);
   991    }
   992    .ui.container.fluid.padded {
   993      padding: 0 8px;
   994    }
   995  }
   996  
   997  .ui.pagination.menu .active.item {
   998    color: var(--color-text);
   999    background: var(--color-active);
  1000  }
  1001  
  1002  .ui.loading.segment::before,
  1003  .ui.loading.form::before {
  1004    background: none;
  1005  }
  1006  
  1007  .ui.loading.form > *,
  1008  .ui.loading.segment > * {
  1009    opacity: 0.35;
  1010  }
  1011  
  1012  .ui.form .fields.error .field textarea,
  1013  .ui.form .fields.error .field select,
  1014  .ui.form .fields.error .field input:not([type]),
  1015  .ui.form .fields.error .field input[type="date"],
  1016  .ui.form .fields.error .field input[type="datetime-local"],
  1017  .ui.form .fields.error .field input[type="email"],
  1018  .ui.form .fields.error .field input[type="number"],
  1019  .ui.form .fields.error .field input[type="password"],
  1020  .ui.form .fields.error .field input[type="search"],
  1021  .ui.form .fields.error .field input[type="tel"],
  1022  .ui.form .fields.error .field input[type="time"],
  1023  .ui.form .fields.error .field input[type="text"],
  1024  .ui.form .fields.error .field input[type="file"],
  1025  .ui.form .fields.error .field input[type="url"],
  1026  .ui.form .fields.error .field .ui.dropdown,
  1027  .ui.form .fields.error .field .ui.dropdown .item,
  1028  .ui.form .field.error .ui.dropdown,
  1029  .ui.form .field.error .ui.dropdown .text,
  1030  .ui.form .field.error .ui.dropdown .item,
  1031  .ui.form .field.error textarea,
  1032  .ui.form .field.error select,
  1033  .ui.form .field.error input:not([type]),
  1034  .ui.form .field.error input[type="date"],
  1035  .ui.form .field.error input[type="datetime-local"],
  1036  .ui.form .field.error input[type="email"],
  1037  .ui.form .field.error input[type="number"],
  1038  .ui.form .field.error input[type="password"],
  1039  .ui.form .field.error input[type="search"],
  1040  .ui.form .field.error input[type="tel"],
  1041  .ui.form .field.error input[type="time"],
  1042  .ui.form .field.error input[type="text"],
  1043  .ui.form .field.error input[type="file"],
  1044  .ui.form .field.error input[type="url"],
  1045  .ui.form .field.error select:focus,
  1046  .ui.form .field.error input:not([type]):focus,
  1047  .ui.form .field.error input[type="date"]:focus,
  1048  .ui.form .field.error input[type="datetime-local"]:focus,
  1049  .ui.form .field.error input[type="email"]:focus,
  1050  .ui.form .field.error input[type="number"]:focus,
  1051  .ui.form .field.error input[type="password"]:focus,
  1052  .ui.form .field.error input[type="search"]:focus,
  1053  .ui.form .field.error input[type="tel"]:focus,
  1054  .ui.form .field.error input[type="time"]:focus,
  1055  .ui.form .field.error input[type="text"]:focus,
  1056  .ui.form .field.error input[type="file"]:focus,
  1057  .ui.form .field.error input[type="url"]:focus {
  1058    background-color: var(--color-error-bg);
  1059    border-color: var(--color-error-border);
  1060    color: var(--color-error-text);
  1061  }
  1062  
  1063  .ui.form .fields.error .field .ui.dropdown,
  1064  .ui.form .field.error .ui.dropdown,
  1065  .ui.form .fields.error .field .ui.dropdown:hover,
  1066  .ui.form .field.error .ui.dropdown:hover {
  1067    border-color: var(--color-error-border) !important;
  1068  }
  1069  
  1070  .ui.form .fields.error .field .ui.dropdown .menu .item:hover,
  1071  .ui.form .field.error .ui.dropdown .menu .item:hover {
  1072    background-color: var(--color-error-bg-hover);
  1073  }
  1074  
  1075  .ui.form .fields.error .field .ui.dropdown .menu .active.item,
  1076  .ui.form .field.error .ui.dropdown .menu .active.item {
  1077    background-color: var(--color-error-bg-active) !important;
  1078  }
  1079  
  1080  .ui.form .fields.error .dropdown .menu,
  1081  .ui.form .field.error .dropdown .menu {
  1082    border-color: var(--color-error-border) !important;
  1083  }
  1084  
  1085  /* A fix for text visibility issue in Chrome autofill in dark mode. */
  1086  /* It's a problem from Formatic UI, and this rule overrides it. */
  1087  .ui.form .field.field input:-webkit-autofill {
  1088    -webkit-text-fill-color: var(--color-black) !important;
  1089  }
  1090  
  1091  .ui.form .field.muted {
  1092    opacity: var(--opacity-disabled);
  1093  }
  1094  
  1095  .ui.loading.loading.input > i.icon svg {
  1096    visibility: hidden;
  1097  }
  1098  
  1099  .text.primary {
  1100    color: var(--color-primary) !important;
  1101  }
  1102  
  1103  .text.red {
  1104    color: var(--color-red) !important;
  1105  }
  1106  
  1107  .text.orange {
  1108    color: var(--color-orange) !important;
  1109  }
  1110  
  1111  .text.yellow {
  1112    color: var(--color-yellow) !important;
  1113  }
  1114  
  1115  .text.olive {
  1116    color: var(--color-olive) !important;
  1117  }
  1118  
  1119  .text.green {
  1120    color: var(--color-green) !important;
  1121  }
  1122  
  1123  .text.teal {
  1124    color: var(--color-teal) !important;
  1125  }
  1126  
  1127  .text.blue {
  1128    color: var(--color-blue) !important;
  1129  }
  1130  
  1131  .text.violet {
  1132    color: var(--color-violet) !important;
  1133  }
  1134  
  1135  .text.purple {
  1136    color: var(--color-purple) !important;
  1137  }
  1138  
  1139  .text.pink {
  1140    color: var(--color-pink) !important;
  1141  }
  1142  
  1143  .text.brown {
  1144    color: var(--color-brown) !important;
  1145  }
  1146  
  1147  .text.black {
  1148    color: var(--color-text) !important;
  1149  }
  1150  
  1151  .text.grey {
  1152    color: var(--color-text-light) !important;
  1153  }
  1154  
  1155  .text.light {
  1156    color: var(--color-text-light) !important;
  1157  }
  1158  
  1159  .text.light-2 {
  1160    color: var(--color-text-light-2) !important;
  1161  }
  1162  
  1163  .text.light-3 {
  1164    color: var(--color-text-light-3) !important;
  1165  }
  1166  
  1167  .text.light.grey {
  1168    color: var(--color-grey-light) !important;
  1169  }
  1170  
  1171  .text.gold {
  1172    color: var(--color-gold) !important;
  1173  }
  1174  
  1175  .text.small {
  1176    font-size: 0.75em;
  1177  }
  1178  
  1179  .ui.form .ui.button {
  1180    font-weight: var(--font-weight-normal);
  1181  }
  1182  
  1183  .ui.floating.label {
  1184    z-index: 10;
  1185  }
  1186  
  1187  .ui.transparent.label {
  1188    background-color: transparent;
  1189  }
  1190  
  1191  .ui.menu,
  1192  .ui.vertical.menu,
  1193  .ui.segment {
  1194    box-shadow: none;
  1195  }
  1196  
  1197  /* replace fomantic popover box shadows */
  1198  .ui.dropdown .menu,
  1199  .ui.upward.dropdown > .menu,
  1200  .ui.menu .dropdown.item .menu,
  1201  .ui.selection.active.dropdown .menu,
  1202  .ui.upward.selection.dropdown .menu,
  1203  .ui.selection.active.dropdown:hover .menu,
  1204  .ui.upward.active.selection.dropdown:hover .menu {
  1205    box-shadow: 0 6px 18px var(--color-shadow);
  1206  }
  1207  .ui.floating.dropdown .menu {
  1208    box-shadow: 0 6px 18px var(--color-shadow) !important;
  1209  }
  1210  
  1211  .ui.dimmer {
  1212    background: var(--color-overlay-backdrop);
  1213  }
  1214  
  1215  /* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */
  1216  /* This fixes the commit graph button on the commits page */
  1217  /* modal svg icons, copied from fomantic except width and height */
  1218  /* center text in fomantic modal dialogs */
  1219  .ui .menu:not(.vertical) .item > .button.compact {
  1220    padding: 0.58928571em 1.125em;
  1221  }
  1222  
  1223  .ui .menu:not(.vertical) .item > .button.small {
  1224    font-size: 0.92857143rem;
  1225  }
  1226  
  1227  .ui.menu .ui.dropdown.item .menu .item {
  1228    width: 100%;
  1229  }
  1230  
  1231  .ui.dropdown .menu > .item > .floating.label {
  1232    z-index: 11;
  1233  }
  1234  
  1235  .ui.dropdown .menu .menu > .item > .floating.label {
  1236    z-index: 21;
  1237  }
  1238  
  1239  .ui.dropdown .menu > .header {
  1240    font-size: 0.8em;
  1241  }
  1242  
  1243  .ui .text.left {
  1244    text-align: left !important;
  1245  }
  1246  
  1247  .ui .text.right {
  1248    text-align: right !important;
  1249  }
  1250  
  1251  .ui .text.normal {
  1252    font-weight: var(--font-weight-normal);
  1253  }
  1254  
  1255  .ui .text.italic {
  1256    font-style: italic;
  1257  }
  1258  
  1259  .ui .text.truncate {
  1260    overflow-x: hidden;
  1261    text-overflow: ellipsis;
  1262    white-space: nowrap;
  1263    display: inline-block;
  1264  }
  1265  
  1266  .ui .text.thin {
  1267    font-weight: var(--font-weight-normal);
  1268  }
  1269  
  1270  .ui .text.middle {
  1271    vertical-align: middle;
  1272  }
  1273  
  1274  .ui .message.flash-message {
  1275    text-align: center;
  1276  }
  1277  
  1278  .ui .message > ul {
  1279    margin-left: auto;
  1280    margin-right: auto;
  1281    display: table;
  1282    text-align: left;
  1283  }
  1284  
  1285  .ui .header > i + .content {
  1286    padding-left: 0.75rem;
  1287    vertical-align: middle;
  1288  }
  1289  
  1290  .ui .info.segment.top h3,
  1291  .ui .info.segment.top h4 {
  1292    margin-top: 0;
  1293  }
  1294  
  1295  .ui .info.segment.top h3:last-child {
  1296    margin-top: 4px;
  1297  }
  1298  
  1299  .ui .info.segment.top > :last-child {
  1300    margin-bottom: 0;
  1301  }
  1302  
  1303  .ui .normal.header {
  1304    font-weight: var(--font-weight-normal);
  1305  }
  1306  
  1307  .ui .form .autofill-dummy {
  1308    position: absolute;
  1309    width: 1px;
  1310    height: 1px;
  1311    overflow: hidden;
  1312    z-index: -10000;
  1313  }
  1314  
  1315  .ui .form .sub.field {
  1316    margin-left: 25px;
  1317  }
  1318  
  1319  .ui .sha.label {
  1320    font-family: var(--fonts-monospace);
  1321    font-size: 13px;
  1322    font-weight: var(--font-weight-normal);
  1323    margin: 0 6px;
  1324    padding: 5px 10px;
  1325  }
  1326  
  1327  .ui .sha.label .shortsha {
  1328    display: inline-block; /* not sure whether it is still needed */
  1329  }
  1330  
  1331  .ui .button.copy-commit-sha {
  1332    border: 1px solid var(--color-light-border);
  1333    margin-right: 3px;
  1334    padding: 6px 6px 4px;
  1335    background: var(--color-light);
  1336  }
  1337  
  1338  .ui .button.truncate {
  1339    display: inline-block;
  1340    max-width: 100%;
  1341    overflow: hidden;
  1342    text-overflow: ellipsis;
  1343    vertical-align: top;
  1344    white-space: nowrap;
  1345    margin-right: 6px;
  1346  }
  1347  
  1348  .ui.status.buttons .svg {
  1349    margin-right: 4px;
  1350  }
  1351  
  1352  .ui.inline.delete-button {
  1353    padding: 8px 15px;
  1354    font-weight: var(--font-weight-normal);
  1355  }
  1356  
  1357  .ui .background.red {
  1358    background-color: var(--color-red) !important;
  1359  }
  1360  
  1361  .ui .background.blue {
  1362    background-color: var(--color-blue) !important;
  1363  }
  1364  
  1365  .ui .background.black {
  1366    background-color: var(--color-black) !important;
  1367  }
  1368  
  1369  .ui .background.grey {
  1370    background-color: var(--color-grey) !important;
  1371  }
  1372  
  1373  .ui .background.light.grey {
  1374    background-color: var(--color-grey) !important;
  1375  }
  1376  
  1377  .ui .background.green {
  1378    background-color: var(--color-green) !important;
  1379  }
  1380  
  1381  .ui .background.purple {
  1382    background-color: var(--color-purple) !important;
  1383  }
  1384  
  1385  .ui .background.yellow {
  1386    background-color: var(--color-yellow) !important;
  1387  }
  1388  
  1389  .ui .background.orange {
  1390    background-color: var(--color-orange) !important;
  1391  }
  1392  
  1393  .ui .background.gold {
  1394    background-color: var(--color-gold) !important;
  1395  }
  1396  
  1397  .ui .migrate {
  1398    color: var(--color-text-light-2) !important;
  1399  }
  1400  
  1401  .ui .migrate a {
  1402    color: var(--color-text-light) !important;
  1403  }
  1404  
  1405  .ui .migrate a:hover {
  1406    color: var(--color-text) !important;
  1407  }
  1408  
  1409  .ui .border {
  1410    border: 1px solid;
  1411  }
  1412  
  1413  .ui .border.red {
  1414    border-color: var(--color-red) !important;
  1415  }
  1416  
  1417  .ui .border.blue {
  1418    border-color: var(--color-blue) !important;
  1419  }
  1420  
  1421  .ui .border.black {
  1422    border-color: var(--color-black) !important;
  1423  }
  1424  
  1425  .ui .border.grey {
  1426    border-color: var(--color-grey) !important;
  1427  }
  1428  
  1429  .ui .border.light.grey {
  1430    border-color: var(--color-grey) !important;
  1431  }
  1432  
  1433  .ui .border.green {
  1434    border-color: var(--color-green) !important;
  1435  }
  1436  
  1437  .ui .border.purple {
  1438    border-color: var(--color-purple) !important;
  1439  }
  1440  
  1441  .ui .border.yellow {
  1442    border-color: var(--color-yellow) !important;
  1443  }
  1444  
  1445  .ui .border.orange {
  1446    border-color: var(--color-orange) !important;
  1447  }
  1448  
  1449  .ui .border.gold {
  1450    border-color: var(--color-gold) !important;
  1451  }
  1452  
  1453  @media (max-width: 767.98px) {
  1454    .ui.pagination.menu .item:not(.active,.navigation),
  1455    .ui.pagination.menu .item.navigation span.navigation_label {
  1456      display: none;
  1457    }
  1458  }
  1459  
  1460  .ui.pagination.menu.narrow .item {
  1461    padding-left: 8px;
  1462    padding-right: 8px;
  1463    min-width: 1em;
  1464    text-align: center;
  1465  }
  1466  
  1467  .ui.pagination.menu.narrow .item .icon {
  1468    margin-right: 0;
  1469  }
  1470  
  1471  .ui.icon.header svg {
  1472    width: 3em;
  1473    height: 3em;
  1474    float: none;
  1475    display: block;
  1476    line-height: var(--line-height-default);
  1477    padding: 0;
  1478    margin: 0 auto 0.5rem;
  1479    opacity: 1;
  1480  }
  1481  
  1482  .ui.floating.dropdown .overflow.menu .scrolling.menu.items {
  1483    border-radius: 0 !important;
  1484    box-shadow: none !important;
  1485    border-bottom: 1px solid var(--color-secondary);
  1486  }
  1487  
  1488  .user-menu > .item {
  1489    width: 100%;
  1490    border-radius: 0 !important;
  1491  }
  1492  
  1493  .scrolling.menu .item.selected {
  1494    font-weight: var(--font-weight-semibold) !important;
  1495  }
  1496  
  1497  .ui.dropdown .scrolling.menu {
  1498    border-color: var(--color-secondary);
  1499  }
  1500  
  1501  .color-preview {
  1502    display: inline-block;
  1503    margin-left: 0.4em;
  1504    height: 0.67em;
  1505    width: 0.67em;
  1506    border-radius: var(--border-radius);
  1507  }
  1508  
  1509  .attention-icon {
  1510    vertical-align: text-top;
  1511  }
  1512  
  1513  .attention-note {
  1514    font-weight: unset;
  1515    color: var(--color-info-text);
  1516  }
  1517  
  1518  .attention-warning {
  1519    font-weight: unset;
  1520    color: var(--color-warning-text);
  1521  }
  1522  
  1523  .center:not(.popup) {
  1524    text-align: center;
  1525  }
  1526  
  1527  @media (max-width: 767.98px) {
  1528    /* double selector so it wins over .gt-df etc */
  1529    .not-mobile.not-mobile {
  1530      display: none !important;
  1531    }
  1532  }
  1533  
  1534  .ui.menu.new-menu {
  1535    margin-bottom: 15px;
  1536    background: var(--color-header-wrapper);
  1537    border-bottom: 1px solid var(--color-secondary) !important;
  1538    overflow: auto;
  1539  }
  1540  
  1541  .ui.menu.new-menu .new-menu-inner {
  1542    display: flex;
  1543    margin-left: auto;
  1544    margin-right: auto;
  1545    overflow-x: auto;
  1546    width: 100%;
  1547    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%);
  1548    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 60px), transparent 100%);
  1549  }
  1550  
  1551  .ui.menu.new-menu .item {
  1552    margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
  1553  }
  1554  
  1555  @media (max-width: 767.98px) {
  1556    .ui.menu.new-menu .item {
  1557      width: auto !important;
  1558    }
  1559  }
  1560  
  1561  .ui.menu.new-menu .item:first-child {
  1562    margin-left: auto; /* "justify-content: center" doesn't work with "overflow: auto", so use margin: auto */
  1563  }
  1564  
  1565  .ui.menu.new-menu .item:last-child {
  1566    padding-right: 30px !important;
  1567    margin-right: auto;
  1568  }
  1569  
  1570  .ui.menu.new-menu::-webkit-scrollbar {
  1571    height: 6px;
  1572    display: none;
  1573  }
  1574  
  1575  .ui.menu.new-menu::-webkit-scrollbar-track {
  1576    background: none !important;
  1577  }
  1578  
  1579  .ui.menu.new-menu::-webkit-scrollbar-thumb {
  1580    box-shadow: none !important;
  1581  }
  1582  
  1583  .ui.menu.new-menu:hover::-webkit-scrollbar {
  1584    display: block;
  1585  }
  1586  
  1587  .repos-search {
  1588    padding-bottom: 0 !important;
  1589  }
  1590  
  1591  .repos-filter {
  1592    margin-top: 0 !important;
  1593    border-bottom-width: 0 !important;
  1594    margin-bottom: 2px !important;
  1595    justify-content: space-evenly;
  1596  }
  1597  
  1598  .ui.secondary.pointing.menu.repos-filter .item {
  1599    padding-left: 4.5px;
  1600    padding-right: 4.5px;
  1601  }
  1602  
  1603  .repo-title {
  1604    font-size: 1.5rem;
  1605    display: flex;
  1606    align-items: center;
  1607    flex: 1;
  1608    word-break: break-all;
  1609    color: var(--color-text-light);
  1610  }
  1611  
  1612  .repo-title .labels {
  1613    margin-left: 0.5rem;
  1614  }
  1615  
  1616  .repo-title .labels > * + * {
  1617    margin-left: 0.5rem;
  1618  }
  1619  
  1620  .activity-bar-graph {
  1621    background-color: var(--color-primary);
  1622    color: var(--color-primary-contrast);
  1623  }
  1624  
  1625  .activity-bar-graph-alt {
  1626    color: var(--color-primary-contrast);
  1627  }
  1628  
  1629  .archived-icon {
  1630    color: var(--color-secondary-dark-2) !important;
  1631  }
  1632  
  1633  .oauth2-authorize-application-box {
  1634    margin-top: 3em !important;
  1635  }
  1636  
  1637  /* multiple radio or checkboxes as inline element */
  1638  .inline-grouped-list {
  1639    display: inline-block;
  1640    vertical-align: top;
  1641  }
  1642  
  1643  .inline-grouped-list > .ui {
  1644    display: block;
  1645    margin-top: 5px;
  1646    margin-bottom: 10px;
  1647  }
  1648  
  1649  .inline-grouped-list > .ui:first-child {
  1650    margin-top: 1px;
  1651  }
  1652  
  1653  .ui.label {
  1654    padding: 0.3em 0.5em;
  1655    transition: none;
  1656  }
  1657  
  1658  .ui.label,
  1659  .ui.menu .item > .label {
  1660    background: var(--color-label-bg);
  1661    color: var(--color-label-text);
  1662  }
  1663  
  1664  .ui.label > a {
  1665    opacity: .75; /* increase contrast over default fomantic .5 */
  1666  }
  1667  
  1668  .ui.active.label {
  1669    background: var(--color-label-active-bg);
  1670    border-color: var(--color-label-active-bg);
  1671    color: var(--color-label-text);
  1672  }
  1673  
  1674  .ui.labels a.label:hover,
  1675  a.ui.label:hover {
  1676    background: var(--color-label-hover-bg);
  1677    border-color: var(--color-label-hover-bg);
  1678    color: var(--color-label-text);
  1679  }
  1680  
  1681  .ui.labels a.active.label:hover,
  1682  a.ui.active.label:hover {
  1683    background: var(--color-label-active-bg);
  1684    border-color: var(--color-label-active-bg);
  1685    color: var(--color-label-text);
  1686  }
  1687  
  1688  .lines-blame-btn {
  1689    padding-left: 10px;
  1690    padding-right: 10px;
  1691    text-align: right !important;
  1692    background-color: var(--color-code-sidebar-bg);
  1693    width: 2%;
  1694  }
  1695  
  1696  .lines-num {
  1697    padding-left: 10px;
  1698    padding-right: 10px;
  1699    text-align: right !important;
  1700    color: var(--color-text-light-1);
  1701    width: 1%;
  1702    font-family: var(--fonts-monospace);
  1703  }
  1704  
  1705  .lines-num span.bottom-line::after {
  1706    border-bottom: 1px solid var(--color-secondary);
  1707  }
  1708  
  1709  .lines-num span::after {
  1710    content: attr(data-line-number);
  1711    line-height: 20px !important;
  1712    padding: 0 10px;
  1713    cursor: pointer;
  1714    display: block;
  1715  }
  1716  
  1717  .lines-type-marker {
  1718    vertical-align: top;
  1719  }
  1720  
  1721  .lines-num,
  1722  .lines-code {
  1723    font-size: 12px;
  1724    font-family: var(--fonts-monospace);
  1725    line-height: 20px;
  1726    padding-top: 0;
  1727    padding-bottom: 0;
  1728    vertical-align: top;
  1729  }
  1730  
  1731  .lines-num pre,
  1732  .lines-code pre,
  1733  .lines-num ol,
  1734  .lines-code ol {
  1735    background-color: inherit;
  1736    margin: 0;
  1737    padding: 0 !important;
  1738  }
  1739  
  1740  .lines-num pre li,
  1741  .lines-code pre li,
  1742  .lines-num ol li,
  1743  .lines-code ol li {
  1744    display: block;
  1745    width: calc(100% - 1ch);
  1746    padding-left: 1ch;
  1747  }
  1748  
  1749  .lines-escape {
  1750    width: 0;
  1751  }
  1752  
  1753  .lines-code {
  1754    background-color: var(--color-code-bg);
  1755    padding-left: 5px;
  1756  }
  1757  
  1758  .lines-code.active,
  1759  .lines-code .active {
  1760    background: var(--color-active-line) !important;
  1761  }
  1762  
  1763  .blame .lines-num {
  1764    padding: 0 !important;
  1765    background-color: var(--color-code-sidebar-bg);
  1766  }
  1767  
  1768  .blame .lines-code {
  1769    padding: 0 !important;
  1770  }
  1771  
  1772  .code-inner {
  1773    font: 12px var(--fonts-monospace);
  1774    white-space: pre-wrap;
  1775    word-break: break-all;
  1776    overflow-wrap: anywhere;
  1777  }
  1778  
  1779  .blame .code-inner {
  1780    white-space: pre;
  1781    word-break: normal;
  1782    word-wrap: normal; /* not using overflow-wrap because safari does not treat is an an alias */
  1783  }
  1784  
  1785  .lines-commit {
  1786    vertical-align: top;
  1787    color: var(--color-grey);
  1788    padding: 0 !important;
  1789    background: var(--color-code-sidebar-bg);
  1790    width: 1%;
  1791  }
  1792  
  1793  .lines-commit .blame-info {
  1794    width: 350px;
  1795    max-width: 350px;
  1796    display: block;
  1797    padding: 0 0 0 10px;
  1798    line-height: 20px;
  1799    box-sizing: content-box;
  1800  }
  1801  
  1802  .lines-commit .blame-info .blame-data {
  1803    display: flex;
  1804    font-family: var(--fonts-regular);
  1805  }
  1806  
  1807  .lines-commit .blame-info .blame-data .blame-message {
  1808    flex-grow: 2;
  1809    overflow: hidden;
  1810    white-space: nowrap;
  1811    text-overflow: ellipsis;
  1812  }
  1813  
  1814  .lines-commit .blame-info .blame-data .blame-time,
  1815  .lines-commit .blame-info .blame-data .blame-avatar {
  1816    flex-shrink: 0;
  1817  }
  1818  
  1819  .lines-commit .ui.avatar {
  1820    height: 18px;
  1821    width: 18px;
  1822    display: block;
  1823    margin-top: 1px;
  1824  }
  1825  
  1826  .top-line-blame {
  1827    border-top: 1px solid var(--color-secondary);
  1828  }
  1829  
  1830  .lines-code .bottom-line,
  1831  .lines-commit .bottom-line {
  1832    border-bottom: 1px solid var(--color-secondary);
  1833  }
  1834  
  1835  .code-view table {
  1836    width: 100%;
  1837  }
  1838  
  1839  .ui.primary.label,
  1840  .ui.primary.labels .label,
  1841  .ui.ui.ui.primary.label {
  1842    background-color: var(--color-primary);
  1843    border-color: var(--color-primary-dark-2);
  1844  }
  1845  
  1846  .ui.basic.labels .primary.label,
  1847  .ui.ui.ui.basic.primary.label {
  1848    background: transparent;
  1849    border-color: var(--color-primary);
  1850    color: var(--color-primary);
  1851  }
  1852  
  1853  .ui.basic.labels a.primary.label:hover,
  1854  a.ui.ui.ui.basic.primary.label:hover {
  1855    background: var(--color-hover);
  1856    border-color: var(--color-primary-dark-1);
  1857    color: var(--color-primary-dark-1);
  1858  }
  1859  
  1860  .ui.basic.labels .secondary.label,
  1861  .ui.ui.ui.basic.secondary.label {
  1862    background: transparent;
  1863    border-color: var(--color-secondary);
  1864    color: var(--color-secondary);
  1865  }
  1866  
  1867  .ui.basic.labels .orange.label,
  1868  .ui.ui.ui.basic.orange.label {
  1869    background: transparent;
  1870    border-color: var(--color-orange);
  1871    color: var(--color-orange);
  1872  }
  1873  
  1874  .ui.basic.labels .green.label,
  1875  .ui.ui.ui.basic.green.label {
  1876    background: transparent;
  1877    border-color: var(--color-green);
  1878    color: var(--color-green);
  1879  }
  1880  
  1881  .ui.basic.labels .olive.label,
  1882  .ui.ui.ui.basic.olive.label {
  1883    background: transparent;
  1884    border-color: var(--color-olive);
  1885    color: var(--color-olive);
  1886  }
  1887  
  1888  .ui.basic.labels .teal.label,
  1889  .ui.ui.ui.basic.teal.label {
  1890    background: transparent;
  1891    border-color: var(--color-teal);
  1892    color: var(--color-teal);
  1893  }
  1894  
  1895  .ui.basic.labels .blue.label,
  1896  .ui.ui.ui.basic.blue.label {
  1897    background: transparent;
  1898    border-color: var(--color-blue);
  1899    color: var(--color-blue);
  1900  }
  1901  
  1902  .ui.basic.labels .violet.label,
  1903  .ui.ui.ui.basic.violet.label {
  1904    background: transparent;
  1905    border-color: var(--color-violet);
  1906    color: var(--color-violet);
  1907  }
  1908  
  1909  .ui.basic.labels .purple.label,
  1910  .ui.ui.ui.basic.purple.label {
  1911    background: transparent;
  1912    border-color: var(--color-purple);
  1913    color: var(--color-purple);
  1914  }
  1915  
  1916  .ui.basic.labels .pink.label,
  1917  .ui.ui.ui.basic.pink.label {
  1918    background: transparent;
  1919    border-color: var(--color-pink);
  1920    color: var(--color-pink);
  1921  }
  1922  
  1923  .ui.basic.labels .red.label,
  1924  .ui.ui.ui.basic.red.label {
  1925    background: transparent;
  1926    border-color: var(--color-red);
  1927    color: var(--color-red);
  1928  }
  1929  
  1930  .ui.basic.labels .brown.label,
  1931  .ui.ui.ui.basic.brown.label {
  1932    background: transparent;
  1933    border-color: var(--color-brown);
  1934    color: var(--color-brown);
  1935  }
  1936  
  1937  .ui.basic.labels .yellow.label,
  1938  .ui.ui.ui.basic.yellow.label {
  1939    background: transparent;
  1940    border-color: var(--color-yellow);
  1941    color: var(--color-yellow);
  1942  }
  1943  
  1944  .ui.basic.labels .grey.label,
  1945  .ui.ui.ui.basic.grey.label {
  1946    background: transparent;
  1947    border-color: var(--color-grey);
  1948    color: var(--color-grey);
  1949  }
  1950  
  1951  .ui.basic.labels .black.label,
  1952  .ui.ui.ui.basic.black.label {
  1953    background: transparent;
  1954    border-color: var(--color-black);
  1955    color: var(--color-black);
  1956  }
  1957  
  1958  .ui.basic.labels .label,
  1959  .ui.basic.label,
  1960  .ui.secondary.labels .ui.basic.label {
  1961    background: var(--color-button);
  1962    border-color: var(--color-light-border);
  1963    color: var(--color-text-light);
  1964  }
  1965  
  1966  .ui.basic.labels a.label:hover,
  1967  a.ui.basic.label:hover {
  1968    color: var(--color-text);
  1969    border-color: var(--color-light-border);
  1970    background: var(--color-hover);
  1971  }
  1972  
  1973  .ui.label > img {
  1974    width: auto !important;
  1975    vertical-align: middle;
  1976    height: 2.1666em !important;
  1977  }
  1978  
  1979  .migrate .svg.gitea-git {
  1980    color: var(--color-git);
  1981  }
  1982  
  1983  .color-icon {
  1984    display: inline-block;
  1985    border-radius: var(--border-radius-circle);
  1986    height: 14px;
  1987    width: 14px;
  1988  }
  1989  
  1990  .ui.label > .color-icon {
  1991    margin-left: 0;
  1992  }
  1993  
  1994  .ui.segment,
  1995  .ui.segments,
  1996  .ui.attached.segment {
  1997    background: var(--color-box-body);
  1998    color: var(--color-text);
  1999    border-color: var(--color-secondary);
  2000  }
  2001  
  2002  .ui.segments > .segment {
  2003    border-color: var(--color-secondary);
  2004  }
  2005  
  2006  .ui.secondary.segment {
  2007    background: var(--color-secondary-bg);
  2008    color: var(--color-text-light);
  2009  }
  2010  
  2011  .ui.attached.header {
  2012    position: relative;
  2013    background: var(--color-box-header);
  2014    border-color: var(--color-secondary);
  2015  }
  2016  
  2017  /* fix misaligned right buttons on box headers */
  2018  .ui.attached.header > .ui.right {
  2019    position: absolute;
  2020    right: 0.78571429rem;
  2021    top: 0;
  2022    bottom: 0;
  2023    display: flex;
  2024    align-items: center;
  2025    gap: 0.25em;
  2026  }
  2027  
  2028  /* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */
  2029  .ui.attached.header > .ui.right .ui.tiny.button {
  2030    padding: 6px 10px;
  2031    font-weight: var(--font-weight-normal);
  2032  }
  2033  
  2034  /* if a .top.attached.header is followed by a .segment, add some margin */
  2035  .ui.segments + .ui.top.attached.header,
  2036  .ui.attached.segment + .ui.top.attached.header {
  2037    margin-top: 1rem;
  2038  }
  2039  
  2040  .rss-icon {
  2041    display: inline-flex;
  2042    color: var(--color-text-light-1);
  2043  }
  2044  
  2045  table th[data-sortt-asc]:hover,
  2046  table th[data-sortt-desc]:hover {
  2047    background: rgba(0, 0, 0, 0.1) !important;
  2048    cursor: pointer !important;
  2049  }
  2050  
  2051  table th[data-sortt-asc] .svg,
  2052  table th[data-sortt-desc] .svg {
  2053    margin-left: 0.25rem;
  2054  }
  2055  
  2056  .ui.dropdown .menu .item {
  2057    border-radius: 0;
  2058  }
  2059  
  2060  .ui.dropdown .menu .item:first-of-type {
  2061    border-radius: var(--border-radius) var(--border-radius) 0 0;
  2062  }
  2063  
  2064  .ui.dropdown .menu .item:last-of-type {
  2065    border-radius: 0 0 var(--border-radius) var(--border-radius);
  2066  }
  2067  
  2068  .ui.multiple.dropdown > .label {
  2069    box-shadow: 0 0 0 1px var(--color-secondary) inset;
  2070  }
  2071  
  2072  .emoji,
  2073  .reaction {
  2074    font-size: 1.25em;
  2075    line-height: var(--line-height-default);
  2076    font-style: normal !important;
  2077    font-weight: var(--font-weight-normal) !important;
  2078    vertical-align: -0.075em;
  2079  }
  2080  
  2081  .emoji img,
  2082  .reaction img {
  2083    border-width: 0 !important;
  2084    margin: 0 !important;
  2085    width: 1em !important;
  2086    height: 1em !important;
  2087    vertical-align: -0.15em;
  2088  }
  2089  
  2090  /* for the jquery.minicolors plugin */
  2091  .minicolors-panel {
  2092    background: var(--color-secondary-dark-1) !important;
  2093  }
  2094  
  2095  /* https://github.com/go-gitea/gitea/pull/11486 */
  2096  .ui.sub.header {
  2097    text-transform: none;
  2098  }
  2099  
  2100  .ui.tabular.menu {
  2101    border-color: var(--color-secondary);
  2102  }
  2103  
  2104  .ui.tabular.menu .item {
  2105    padding: 11px 12px;
  2106    color: var(--color-text-light-2);
  2107  }
  2108  
  2109  .ui.tabular.menu .item:hover {
  2110    color: var(--color-text);
  2111  }
  2112  
  2113  .ui.tabular.menu .active.item,
  2114  .ui.tabular.menu .active.item:hover {
  2115    background: var(--color-body);
  2116    border-color: var(--color-secondary);
  2117    color: var(--color-text);
  2118    margin-top: 1px; /* offset fomantic's margin-bottom: -1px */
  2119  }
  2120  
  2121  .ui.segment .ui.tabular.menu .active.item,
  2122  .ui.segment .ui.tabular.menu .active.item:hover {
  2123    background: var(--color-box-body);
  2124  }
  2125  
  2126  .ui.secondary.pointing.menu {
  2127    border-color: var(--color-secondary);
  2128  }
  2129  
  2130  .ui.secondary.pointing.menu .item {
  2131    color: var(--color-text-light-2);
  2132  }
  2133  
  2134  .ui.secondary.pointing.menu .active.item,
  2135  .ui.secondary.pointing.menu .active.item:hover,
  2136  .ui.secondary.pointing.menu .dropdown.item:hover,
  2137  .ui.secondary.pointing.menu a.item:hover {
  2138    color: var(--color-text-dark);
  2139  }
  2140  
  2141  .ui.header {
  2142    color: var(--color-text);
  2143  }
  2144  
  2145  .ui.header .ui.label {
  2146    margin-left: 0.25rem;
  2147  }
  2148  
  2149  .ui.header > .ui.label.compact {
  2150    margin-top: inherit;
  2151  }
  2152  
  2153  .ui.header .sub.header {
  2154    color: var(--color-text-light-1);
  2155  }
  2156  
  2157  .flash-error details code,
  2158  .flash-warning details code {
  2159    display: block;
  2160    text-align: left;
  2161  }
  2162  
  2163  .truncated-item-container {
  2164    display: flex !important;
  2165    align-items: center;
  2166  }
  2167  
  2168  .ellipsis-button {
  2169    padding: 0 5px 8px !important;
  2170    display: inline-block !important;
  2171    font-weight: var(--font-weight-semibold) !important;
  2172    line-height: 6px !important;
  2173    vertical-align: middle !important;
  2174  }
  2175  
  2176  .truncated-item-name {
  2177    line-height: 2;
  2178    white-space: nowrap;
  2179    overflow: hidden;
  2180    text-overflow: ellipsis;
  2181    margin-top: -0.5em;
  2182    margin-bottom: -0.5em;
  2183  }
  2184  
  2185  .precolors {
  2186    display: flex;
  2187    flex-direction: column;
  2188    justify-content: center;
  2189    margin-left: 1em;
  2190  }
  2191  
  2192  .precolors .color {
  2193    display: inline-block;
  2194    width: 15px;
  2195    height: 15px;
  2196  }
  2197  
  2198  .ui.dropdown:not(.button) {
  2199    line-height: var(--line-height-default); /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */
  2200  }
  2201  
  2202  /* dropdown has some kinds of icons:
  2203  - "> .dropdown.icon": the arrow for opening the dropdown
  2204  - "> .remove.icon": the "x" icon for clearing the dropdown, only used in selection dropdown
  2205  - "> .ui.label > .delete.icon": the "x" icon for removing a label item in multiple selection dropdown
  2206  */
  2207  
  2208  .ui.dropdown.mini.button,
  2209  .ui.dropdown.tiny.button {
  2210    padding-right: 20px;
  2211  }
  2212  .ui.dropdown.button {
  2213    padding-right: 22px;
  2214  }
  2215  .ui.dropdown.large.button {
  2216    padding-right: 24px;
  2217  }
  2218  
  2219  /* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */
  2220  .ui.ui.dropdown > .icon.icon {
  2221    position: initial; /* plain dropdown and button dropdown use flex layout for icons */
  2222    padding: 0;
  2223    margin: 0;
  2224    height: auto;
  2225  }
  2226  
  2227  .ui.ui.dropdown > .icon.icon:hover {
  2228    opacity: 1;
  2229  }
  2230  
  2231  .ui.ui.button.dropdown > .icon.icon,
  2232  .ui.ui.selection.dropdown > .icon.icon {
  2233    position: absolute; /* selection dropdown uses absolute layout for icons */
  2234    top: 50%;
  2235    transform: translateY(-50%);
  2236  }
  2237  
  2238  .ui.ui.dropdown > .dropdown.icon {
  2239    right: 0.5em;
  2240  }
  2241  
  2242  .ui.ui.dropdown > .remove.icon {
  2243    right: 2em;
  2244  }
  2245  
  2246  .btn,
  2247  .ui.ui.button,
  2248  .ui.ui.dropdown,
  2249  .ui.ui.label,
  2250  .flex-items-inline > .item,
  2251  .flex-text-inline {
  2252    display: inline-flex;
  2253    align-items: center;
  2254    gap: .25rem;
  2255    vertical-align: middle;
  2256  }
  2257  
  2258  .ui.ui.button {
  2259    justify-content: center;
  2260  }
  2261  
  2262  .ui.dropdown .ui.label .svg {
  2263    vertical-align: middle;
  2264  }
  2265  
  2266  .ui.ui.circular.label {
  2267    justify-content: center;
  2268  }
  2269  
  2270  .ui.ui.labeled.button {
  2271    gap: 0;
  2272    align-items: stretch;
  2273  }
  2274  
  2275  .ui.ui.icon.input .icon {
  2276    display: flex;
  2277    align-items: center;
  2278    justify-content: center;
  2279  }
  2280  
  2281  .flex-items-block > .item,
  2282  .flex-text-block {
  2283    display: flex;
  2284    align-items: center;
  2285    gap: .25rem;
  2286  }