code.gitea.io/gitea@v1.22.3/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    /* images */
    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    /* other variables */
    19    --border-radius: 4px;
    20    --border-radius-medium: 6px;
    21    --border-radius-full: 99999px; /* TODO: use calc(infinity * 1px) */
    22    --opacity-disabled: 0.55;
    23    --height-loading: 16rem;
    24    --min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
    25    --tab-size: 4;
    26    --checkbox-size: 15px; /* height and width of checkbox and radio inputs */
    27    --page-spacing: 16px; /* space between page elements */
    28    --page-margin-x: 32px; /* minimum space on left and right side of page */
    29  }
    30  
    31  @media (min-width: 768px) and (max-width: 1200px) {
    32    :root {
    33      --page-margin-x: 16px;
    34    }
    35  }
    36  
    37  @media (max-width: 767.98px) {
    38    :root {
    39      --page-margin-x: 8px;
    40    }
    41  }
    42  
    43  :root * {
    44    --fonts-regular: var(--fonts-override, var(--fonts-proportional)), "Noto Sans", "Liberation Sans", sans-serif, var(--fonts-emoji);
    45  }
    46  
    47  *, ::before, ::after {
    48    /* these are needed for tailwind borders to work because we do not load tailwind's base
    49       https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css */
    50    border-width: 0;
    51    border-style: solid;
    52    border-color: currentcolor;
    53  }
    54  
    55  html, body {
    56    height: 100%;
    57    font-size: 14px;
    58  }
    59  
    60  body {
    61    line-height: 20px;
    62    font-family: var(--fonts-regular);
    63    color: var(--color-text);
    64    background-color: var(--color-body);
    65    tab-size: var(--tab-size);
    66    display: flex;
    67    flex-direction: column;
    68    overflow-x: visible;
    69    overflow-wrap: break-word;
    70  }
    71  
    72  textarea {
    73    font-family: var(--fonts-regular);
    74  }
    75  
    76  pre,
    77  code,
    78  kbd,
    79  samp {
    80    font-family: var(--fonts-monospace);
    81  }
    82  
    83  pre,
    84  code,
    85  kbd,
    86  samp,
    87  .tw-font-mono {
    88    font-size: 0.95em; /* compensate for monospace fonts being usually slightly larger */
    89  }
    90  
    91  b,
    92  strong,
    93  h1,
    94  h2,
    95  h3,
    96  h4,
    97  h5,
    98  h6 {
    99    font-weight: var(--font-weight-semibold);
   100  }
   101  
   102  h1,
   103  h2,
   104  h3,
   105  h4,
   106  h5 {
   107    line-height: 1.28571429;
   108    margin: calc(2rem - 0.1428571428571429em) 0 1rem;
   109    font-weight: var(--font-weight-medium);
   110    padding: 0;
   111  }
   112  
   113  h1 {
   114    min-height: 1rem;
   115    font-size: 2rem;
   116  }
   117  
   118  h2 {
   119    font-size: 1.71428571rem;
   120  }
   121  
   122  h3 {
   123    font-size: 1.28571429rem;
   124  }
   125  
   126  h4 {
   127    font-size: 1.07142857rem;
   128  }
   129  
   130  h5 {
   131    font-size: 1rem;
   132  }
   133  
   134  h1:first-child,
   135  h2:first-child,
   136  h3:first-child,
   137  h4:first-child,
   138  h5:first-child {
   139    margin-top: 0;
   140  }
   141  
   142  h1:last-child,
   143  h2:last-child,
   144  h3:last-child,
   145  h4:last-child,
   146  h5:last-child {
   147    margin-bottom: 0;
   148  }
   149  
   150  p {
   151    margin: 0 0 1em;
   152    line-height: 1.4285;
   153  }
   154  
   155  p:first-child {
   156    margin-top: 0;
   157  }
   158  
   159  p:last-child {
   160    margin-bottom: 0;
   161  }
   162  
   163  table {
   164    border-collapse: collapse;
   165  }
   166  
   167  button {
   168    cursor: pointer;
   169  }
   170  
   171  details summary {
   172    cursor: pointer;
   173  }
   174  
   175  details summary > * {
   176    display: inline;
   177  }
   178  
   179  progress {
   180    background: var(--color-secondary-dark-1);
   181    border-radius: var(--border-radius);
   182    border: none;
   183    overflow: hidden;
   184  }
   185  
   186  progress::-webkit-progress-bar {
   187    background: var(--color-secondary-dark-1);
   188  }
   189  
   190  progress::-webkit-progress-value {
   191    background-color: var(--color-accent);
   192  }
   193  
   194  progress::-moz-progress-bar {
   195    background-color: var(--color-accent);
   196  }
   197  
   198  * {
   199    caret-color: var(--color-caret);
   200  }
   201  
   202  ::file-selector-button {
   203    border: 1px solid var(--color-light-border);
   204    color: var(--color-text-light);
   205    background: var(--color-light);
   206    border-radius: var(--border-radius);
   207  }
   208  
   209  ::file-selector-button:hover {
   210    color: var(--color-text);
   211    background: var(--color-hover);
   212  }
   213  
   214  ::selection {
   215    background: var(--color-primary-light-1);
   216    color: var(--color-white);
   217  }
   218  
   219  ::placeholder,
   220  .ui.dropdown:not(.button) > .default.text,
   221  .ui.default.dropdown:not(.button) > .text {
   222    color: var(--color-placeholder-text) !important;
   223    opacity: 1 !important;
   224  }
   225  
   226  .unselectable,
   227  .button,
   228  .lines-num,
   229  .lines-commit,
   230  .lines-commit .blame-info,
   231  .ellipsis-button {
   232    -webkit-touch-callout: none;
   233    -webkit-user-select: none;
   234    user-select: none;
   235  }
   236  
   237  a {
   238    color: var(--color-primary);
   239    cursor: pointer;
   240    text-decoration-line: none;
   241    text-decoration-skip-ink: all;
   242  }
   243  
   244  a:hover {
   245    text-decoration-line: underline;
   246  }
   247  
   248  /* a = always colored, underlined on hover */
   249  /* a.muted = colored on hover, underlined on hover */
   250  /* a.suppressed = never colored, underlined on hover */
   251  /* a.silenced = never colored, never underlined */
   252  
   253  a.muted,
   254  a.suppressed,
   255  a.silenced,
   256  .muted-links a {
   257    color: inherit;
   258  }
   259  
   260  a:hover,
   261  a.suppressed:hover,
   262  a.muted:hover,
   263  a.muted:hover [class*="color-text"],
   264  .muted-links a:hover {
   265    color: var(--color-primary);
   266  }
   267  
   268  a.silenced:hover,
   269  a.suppressed:hover {
   270    color: inherit;
   271  }
   272  
   273  a.silenced:hover {
   274    text-decoration-line: none;
   275  }
   276  
   277  a.label,
   278  .ui.search .results a,
   279  .ui .menu a,
   280  .ui.cards a.card,
   281  .issue-keyword a {
   282    text-decoration-line: none !important;
   283  }
   284  
   285  .ui.search > .results {
   286    background: var(--color-body);
   287    border-color: var(--color-secondary);
   288    overflow-wrap: anywhere; /* allow text to wrap as fomantic limits this to 18em width */
   289  }
   290  
   291  .ui.search > .results .result {
   292    background: var(--color-body);
   293    border-color: var(--color-secondary);
   294    display: flex;
   295    align-items: center;
   296  }
   297  
   298  .ui.search > .results .result .title {
   299    color: var(--color-text-dark);
   300  }
   301  
   302  .ui.search > .results .result .description {
   303    color: var(--color-text-light-2);
   304  }
   305  
   306  .ui.search > .results .result .image {
   307    width: auto;
   308    height: auto;
   309  }
   310  
   311  .ui.search > .results .result:hover,
   312  .ui.category.search > .results .category .result:hover {
   313    background: var(--color-hover);
   314  }
   315  
   316  .inline-code-block {
   317    padding: 2px 4px;
   318    border-radius: .24em;
   319    background-color: var(--color-label-bg);
   320  }
   321  
   322  .ui.menu .dropdown.item:hover,
   323  .ui.menu a.item:hover,
   324  .ui.menu details.item summary:hover {
   325    color: var(--color-text);
   326    background: var(--color-hover);
   327  }
   328  
   329  /* slightly more contrast for filters on issue list */
   330  .ui.ui.menu .dropdown.item.disabled {
   331    color: var(--color-text-light-2);
   332  }
   333  
   334  .ui.dropdown .menu {
   335    background: var(--color-menu);
   336    border-color: var(--color-secondary);
   337  }
   338  
   339  .ui.dropdown .menu > .header:not(.ui) {
   340    color: var(--color-text);
   341  }
   342  
   343  .ui.dropdown .menu > .item {
   344    color: var(--color-text);
   345  }
   346  
   347  .ui.dropdown .menu > .item:hover {
   348    color: var(--color-text);
   349    background: var(--color-hover);
   350  }
   351  
   352  .ui.dropdown .menu > .item:active {
   353    color: var(--color-text);
   354    background: var(--color-active);
   355  }
   356  
   357  .ui.dropdown .menu .active.item {
   358    color: var(--color-text);
   359    background: var(--color-active);
   360    border-radius: 0;
   361    font-weight: var(--font-weight-normal);
   362  }
   363  
   364  /* fix misaligned images in webhook dropdown */
   365  .ui.dropdown .menu > .item > img {
   366    margin-top: -0.25rem;
   367    margin-bottom: -0.25rem;
   368  }
   369  .ui.dropdown .menu > .item > svg {
   370    margin-right: .78rem; /* use the same margin as for <img> */
   371  }
   372  
   373  .ui.selection.dropdown .menu > .item {
   374    border-color: var(--color-secondary);
   375  }
   376  
   377  .ui.selection.visible.dropdown > .text:not(.default) {
   378    color: var(--color-text);
   379  }
   380  
   381  .ui.dropdown.selected,
   382  .ui.dropdown .menu .selected.item {
   383    color: var(--color-text);
   384    background: var(--color-hover);
   385  }
   386  
   387  .ui.dropdown .menu > .message:not(.ui) {
   388    color: var(--color-text-light-2);
   389  }
   390  
   391  /* extend fomantic style '.ui.dropdown > .text > img' to include svg.img */
   392  .ui.dropdown > .text > .img {
   393    margin-left: 0;
   394    float: none;
   395    margin-right: 0.78571429rem;
   396  }
   397  
   398  .ui.dropdown > .text > .description,
   399  .ui.dropdown .menu > .item > .description {
   400    color: var(--color-text-light-2);
   401  }
   402  
   403  .ui.form textarea:not([rows]) {
   404    height: var(--min-height-textarea); /* override fomantic default 12em */
   405    min-height: var(--min-height-textarea); /* override fomantic default 8em */
   406  }
   407  
   408  /* styles from removed fomantic transition module */
   409  .hidden.transition {
   410    visibility: hidden;
   411    display: none;
   412  }
   413  .visible.transition {
   414    display: block !important;
   415    visibility: visible !important;
   416  }
   417  
   418  .ui.selection.active.dropdown,
   419  .ui.selection.active.dropdown:hover,
   420  .ui.selection.active.dropdown .menu,
   421  .ui.selection.active.dropdown:hover .menu {
   422    border-color: var(--color-primary);
   423  }
   424  
   425  .ui.pointing.dropdown > .menu:not(.hidden)::after {
   426    background: var(--color-menu);
   427    box-shadow: -1px -1px 0 0 var(--color-secondary);
   428  }
   429  
   430  .ui.pointing.upward.dropdown .menu::after,
   431  .ui.top.pointing.upward.dropdown .menu::after {
   432    box-shadow: 1px 1px 0 0 var(--color-secondary);
   433  }
   434  
   435  .ui.comments .comment .text {
   436    margin: 0;
   437  }
   438  
   439  .ui.comments .comment .text,
   440  .ui.comments .comment .author {
   441    color: var(--color-text);
   442  }
   443  
   444  .ui.comments .comment a.author:hover {
   445    color: var(--color-primary);
   446  }
   447  
   448  .ui.comments .comment .metadata {
   449    color: var(--color-text-light-2);
   450  }
   451  
   452  .ui.comments .comment .actions a {
   453    color: var(--color-text-light);
   454  }
   455  
   456  .ui.comments .comment .actions a.active,
   457  .ui.comments .comment .actions a:hover {
   458    color: var(--color-primary);
   459  }
   460  
   461  img.ui.avatar,
   462  .ui.avatar img,
   463  .ui.avatar svg {
   464    border-radius: var(--border-radius);
   465    object-fit: contain;
   466    aspect-ratio: 1;
   467  }
   468  
   469  .ui.error.message .header,
   470  .ui.warning.message .header {
   471    color: inherit;
   472    filter: saturate(2);
   473  }
   474  
   475  .full.height {
   476    flex-grow: 1;
   477    padding-bottom: 80px;
   478  }
   479  
   480  /* add margin below .secondary nav when it is the first child */
   481  .page-content > :first-child.secondary-nav {
   482    margin-bottom: 14px;
   483  }
   484  
   485  /* add margin to all pages when there is no .secondary.nav */
   486  .page-content > :first-child:not(.secondary-nav) {
   487    margin-top: var(--page-spacing);
   488  }
   489  /* if .ui.grid is the first child the first grid-column has 'padding-top: 1rem' which we need
   490     to compensate here */
   491  .page-content > :first-child.ui.grid {
   492    margin-top: calc(var(--page-spacing) - 1rem);
   493  }
   494  
   495  .ui.form .fields.error .field textarea,
   496  .ui.form .fields.error .field select,
   497  .ui.form .fields.error .field input:not([type]),
   498  .ui.form .fields.error .field input[type="date"],
   499  .ui.form .fields.error .field input[type="datetime-local"],
   500  .ui.form .fields.error .field input[type="email"],
   501  .ui.form .fields.error .field input[type="number"],
   502  .ui.form .fields.error .field input[type="password"],
   503  .ui.form .fields.error .field input[type="search"],
   504  .ui.form .fields.error .field input[type="tel"],
   505  .ui.form .fields.error .field input[type="time"],
   506  .ui.form .fields.error .field input[type="text"],
   507  .ui.form .fields.error .field input[type="file"],
   508  .ui.form .fields.error .field input[type="url"],
   509  .ui.form .fields.error .field .ui.dropdown,
   510  .ui.form .fields.error .field .ui.dropdown .item,
   511  .ui.form .field.error .ui.dropdown,
   512  .ui.form .field.error .ui.dropdown .text,
   513  .ui.form .field.error .ui.dropdown .item,
   514  .ui.form .field.error textarea,
   515  .ui.form .field.error select,
   516  .ui.form .field.error input:not([type]),
   517  .ui.form .field.error input[type="date"],
   518  .ui.form .field.error input[type="datetime-local"],
   519  .ui.form .field.error input[type="email"],
   520  .ui.form .field.error input[type="number"],
   521  .ui.form .field.error input[type="password"],
   522  .ui.form .field.error input[type="search"],
   523  .ui.form .field.error input[type="tel"],
   524  .ui.form .field.error input[type="time"],
   525  .ui.form .field.error input[type="text"],
   526  .ui.form .field.error input[type="file"],
   527  .ui.form .field.error input[type="url"],
   528  .ui.form .field.error select:focus,
   529  .ui.form .field.error input:not([type]):focus,
   530  .ui.form .field.error input[type="date"]:focus,
   531  .ui.form .field.error input[type="datetime-local"]:focus,
   532  .ui.form .field.error input[type="email"]:focus,
   533  .ui.form .field.error input[type="number"]:focus,
   534  .ui.form .field.error input[type="password"]:focus,
   535  .ui.form .field.error input[type="search"]:focus,
   536  .ui.form .field.error input[type="tel"]:focus,
   537  .ui.form .field.error input[type="time"]:focus,
   538  .ui.form .field.error input[type="text"]:focus,
   539  .ui.form .field.error input[type="file"]:focus,
   540  .ui.form .field.error input[type="url"]:focus {
   541    background-color: var(--color-error-bg);
   542    border-color: var(--color-error-border);
   543    color: var(--color-error-text);
   544  }
   545  
   546  .ui.form .fields.error .field .ui.dropdown,
   547  .ui.form .field.error .ui.dropdown,
   548  .ui.form .fields.error .field .ui.dropdown:hover,
   549  .ui.form .field.error .ui.dropdown:hover {
   550    border-color: var(--color-error-border) !important;
   551  }
   552  
   553  .ui.form .fields.error .field .ui.dropdown .menu .item:hover,
   554  .ui.form .field.error .ui.dropdown .menu .item:hover {
   555    background-color: var(--color-error-bg-hover);
   556  }
   557  
   558  .ui.form .fields.error .field .ui.dropdown .menu .active.item,
   559  .ui.form .field.error .ui.dropdown .menu .active.item {
   560    background-color: var(--color-error-bg-active) !important;
   561  }
   562  
   563  .ui.form .fields.error .dropdown .menu,
   564  .ui.form .field.error .dropdown .menu {
   565    border-color: var(--color-error-border) !important;
   566  }
   567  
   568  input:-webkit-autofill,
   569  input:-webkit-autofill:focus,
   570  input:-webkit-autofill:hover,
   571  input:-webkit-autofill:active,
   572  .ui.form .field.field input:-webkit-autofill,
   573  .ui.form .field.field input:-webkit-autofill:focus,
   574  .ui.form .field.field input:-webkit-autofill:hover,
   575  .ui.form .field.field input:-webkit-autofill:active {
   576    -webkit-background-clip: text;
   577    -webkit-text-fill-color: var(--color-text);
   578    box-shadow: 0 0 0 100px var(--color-primary-light-6) inset !important;
   579    border-color: var(--color-primary-light-4) !important;
   580  }
   581  
   582  .ui.form .field.muted {
   583    opacity: var(--opacity-disabled);
   584  }
   585  
   586  .text.primary {
   587    color: var(--color-primary) !important;
   588  }
   589  
   590  .text.red {
   591    color: var(--color-red) !important;
   592  }
   593  
   594  .text.orange {
   595    color: var(--color-orange) !important;
   596  }
   597  
   598  .text.yellow {
   599    color: var(--color-yellow) !important;
   600  }
   601  
   602  .text.olive {
   603    color: var(--color-olive) !important;
   604  }
   605  
   606  .text.green {
   607    color: var(--color-green) !important;
   608  }
   609  
   610  .text.teal {
   611    color: var(--color-teal) !important;
   612  }
   613  
   614  .text.blue {
   615    color: var(--color-blue) !important;
   616  }
   617  
   618  .text.violet {
   619    color: var(--color-violet) !important;
   620  }
   621  
   622  .text.purple {
   623    color: var(--color-purple) !important;
   624  }
   625  
   626  .text.pink {
   627    color: var(--color-pink) !important;
   628  }
   629  
   630  .text.brown {
   631    color: var(--color-brown) !important;
   632  }
   633  
   634  .text.black {
   635    color: var(--color-text) !important;
   636  }
   637  
   638  .text.grey {
   639    color: var(--color-text-light) !important;
   640  }
   641  
   642  .text.light {
   643    color: var(--color-text-light) !important;
   644  }
   645  
   646  .text.light-2 {
   647    color: var(--color-text-light-2) !important;
   648  }
   649  
   650  .text.light-3 {
   651    color: var(--color-text-light-3) !important;
   652  }
   653  
   654  .text.light.grey {
   655    color: var(--color-grey-light) !important;
   656  }
   657  
   658  .text.gold {
   659    color: var(--color-gold) !important;
   660  }
   661  
   662  .text.small {
   663    font-size: 0.75em;
   664  }
   665  
   666  /* popover box shadows */
   667  .ui.dropdown .menu,
   668  .ui.upward.dropdown > .menu,
   669  .ui.menu .dropdown.item .menu,
   670  .ui.selection.active.dropdown .menu,
   671  .ui.upward.selection.dropdown .menu,
   672  .ui.selection.active.dropdown:hover .menu,
   673  .ui.upward.active.selection.dropdown:hover .menu {
   674    box-shadow: 0 6px 18px var(--color-shadow);
   675  }
   676  .ui.floating.dropdown .menu {
   677    box-shadow: 0 6px 18px var(--color-shadow) !important;
   678  }
   679  
   680  .ui.dimmer {
   681    background: var(--color-overlay-backdrop);
   682  }
   683  
   684  .ui.dropdown .menu > .header {
   685    font-size: 0.8em;
   686  }
   687  
   688  .ui .text.left {
   689    text-align: left !important;
   690  }
   691  
   692  .ui .text.right {
   693    text-align: right !important;
   694  }
   695  
   696  .ui .text.truncate {
   697    overflow-x: hidden;
   698    text-overflow: ellipsis;
   699    white-space: nowrap;
   700    display: inline-block;
   701  }
   702  
   703  .ui .message.flash-message {
   704    text-align: center;
   705  }
   706  
   707  .ui .message > ul {
   708    margin-left: auto;
   709    margin-right: auto;
   710    display: table;
   711    text-align: left;
   712  }
   713  
   714  .ui .header > i + .content {
   715    padding-left: 0.75rem;
   716    vertical-align: middle;
   717  }
   718  
   719  .ui .form .autofill-dummy {
   720    position: absolute;
   721    width: 1px;
   722    height: 1px;
   723    overflow: hidden;
   724    z-index: -10000;
   725  }
   726  
   727  .ui .form .sub.field {
   728    margin-left: 25px;
   729  }
   730  
   731  .ui .sha.label {
   732    font-family: var(--fonts-monospace);
   733    font-size: 13px;
   734    font-weight: var(--font-weight-normal);
   735    margin: 0 6px;
   736    padding: 5px 10px;
   737    flex-shrink: 0;
   738  }
   739  
   740  .ui .sha.label .shortsha {
   741    display: inline-block; /* not sure whether it is still needed */
   742  }
   743  
   744  .ui .button.truncate {
   745    display: inline-block;
   746    max-width: 100%;
   747    overflow: hidden;
   748    text-overflow: ellipsis;
   749    vertical-align: top;
   750    white-space: nowrap;
   751    margin-right: 6px;
   752  }
   753  
   754  .ui.status.buttons .svg {
   755    margin-right: 4px;
   756  }
   757  
   758  .ui.inline.delete-button {
   759    padding: 8px 15px;
   760    font-weight: var(--font-weight-normal);
   761  }
   762  
   763  .ui .background.red {
   764    background-color: var(--color-red) !important;
   765  }
   766  
   767  .ui .background.blue {
   768    background-color: var(--color-blue) !important;
   769  }
   770  
   771  .ui .background.black {
   772    background-color: var(--color-black) !important;
   773  }
   774  
   775  .ui .background.grey {
   776    background-color: var(--color-grey) !important;
   777  }
   778  
   779  .ui .background.light.grey {
   780    background-color: var(--color-grey) !important;
   781  }
   782  
   783  .ui .background.green {
   784    background-color: var(--color-green) !important;
   785  }
   786  
   787  .ui .background.purple {
   788    background-color: var(--color-purple) !important;
   789  }
   790  
   791  .ui .background.yellow {
   792    background-color: var(--color-yellow) !important;
   793  }
   794  
   795  .ui .background.orange {
   796    background-color: var(--color-orange) !important;
   797  }
   798  
   799  .ui .background.gold {
   800    background-color: var(--color-gold) !important;
   801  }
   802  
   803  .ui .migrate {
   804    color: var(--color-text-light-2) !important;
   805  }
   806  
   807  .ui .migrate a {
   808    color: var(--color-text-light) !important;
   809  }
   810  
   811  .ui .migrate a:hover {
   812    color: var(--color-text) !important;
   813  }
   814  
   815  .ui .border {
   816    border: 1px solid;
   817  }
   818  
   819  .ui .border.red {
   820    border-color: var(--color-red) !important;
   821  }
   822  
   823  .ui .border.blue {
   824    border-color: var(--color-blue) !important;
   825  }
   826  
   827  .ui .border.black {
   828    border-color: var(--color-black) !important;
   829  }
   830  
   831  .ui .border.grey {
   832    border-color: var(--color-grey) !important;
   833  }
   834  
   835  .ui .border.light.grey {
   836    border-color: var(--color-grey) !important;
   837  }
   838  
   839  .ui .border.green {
   840    border-color: var(--color-green) !important;
   841  }
   842  
   843  .ui .border.purple {
   844    border-color: var(--color-purple) !important;
   845  }
   846  
   847  .ui .border.yellow {
   848    border-color: var(--color-yellow) !important;
   849  }
   850  
   851  .ui .border.orange {
   852    border-color: var(--color-orange) !important;
   853  }
   854  
   855  .ui .border.gold {
   856    border-color: var(--color-gold) !important;
   857  }
   858  
   859  .ui.floating.dropdown .overflow.menu .scrolling.menu.items {
   860    border-radius: 0 !important;
   861    box-shadow: none !important;
   862    border-bottom: 1px solid var(--color-secondary);
   863  }
   864  
   865  .user-menu > .item {
   866    width: 100%;
   867    border-radius: 0 !important;
   868  }
   869  
   870  .scrolling.menu .item.selected {
   871    font-weight: var(--font-weight-semibold) !important;
   872  }
   873  
   874  .ui.dropdown .scrolling.menu {
   875    border-color: var(--color-secondary);
   876    border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
   877  }
   878  
   879  .color-preview {
   880    display: inline-block;
   881    margin-left: 0.4em;
   882    height: 0.67em;
   883    width: 0.67em;
   884    border-radius: var(--border-radius);
   885  }
   886  
   887  .attention-icon {
   888    margin: 2px 6px 0 0;
   889  }
   890  
   891  blockquote.attention-note {
   892    border-left-color: var(--color-blue-dark-1);
   893  }
   894  strong.attention-note, svg.attention-note {
   895    color: var(--color-blue-dark-1);
   896  }
   897  
   898  blockquote.attention-tip {
   899    border-left-color: var(--color-success-text);
   900  }
   901  strong.attention-tip, svg.attention-tip {
   902    color: var(--color-success-text);
   903  }
   904  
   905  blockquote.attention-important {
   906    border-left-color: var(--color-violet-dark-1);
   907  }
   908  strong.attention-important, svg.attention-important {
   909    color: var(--color-violet-dark-1);
   910  }
   911  
   912  blockquote.attention-warning {
   913    border-left-color: var(--color-warning-text);
   914  }
   915  strong.attention-warning, svg.attention-warning {
   916    color: var(--color-warning-text);
   917  }
   918  
   919  blockquote.attention-caution {
   920    border-left-color: var(--color-red-dark-1);
   921  }
   922  strong.attention-caution, svg.attention-caution {
   923    color: var(--color-red-dark-1);
   924  }
   925  
   926  .center:not(.popup) {
   927    text-align: center;
   928  }
   929  
   930  overflow-menu {
   931    border-bottom: 1px solid var(--color-secondary) !important;
   932    display: flex;
   933  }
   934  
   935  overflow-menu .overflow-menu-items {
   936    display: flex;
   937    flex: 1;
   938  }
   939  
   940  overflow-menu .overflow-menu-items .item {
   941    margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
   942  }
   943  
   944  overflow-menu .overflow-menu-items .item-flex-space {
   945    flex: 1;
   946  }
   947  
   948  overflow-menu .overflow-menu-button {
   949    background: transparent;
   950    border: none;
   951    color: inherit;
   952    text-align: center;
   953    width: 32px;
   954    padding: 0;
   955  }
   956  
   957  overflow-menu .overflow-menu-button:hover {
   958    color: var(--color-text-dark);
   959  }
   960  
   961  overflow-menu .ui.label {
   962    margin-left: 7px !important; /* save some space */
   963  }
   964  
   965  .activity-bar-graph {
   966    background-color: var(--color-primary);
   967    color: var(--color-primary-contrast);
   968  }
   969  
   970  .activity-bar-graph-alt {
   971    color: var(--color-primary-contrast);
   972  }
   973  
   974  .archived-icon {
   975    color: var(--color-secondary-dark-2) !important;
   976  }
   977  
   978  .oauth2-authorize-application-box {
   979    margin-top: 3em !important;
   980  }
   981  
   982  /* multiple radio or checkboxes as inline element */
   983  .inline-grouped-list {
   984    display: inline-block;
   985    vertical-align: top;
   986  }
   987  
   988  .inline-grouped-list > .ui {
   989    display: block;
   990    margin-top: 5px;
   991    margin-bottom: 10px;
   992  }
   993  
   994  .inline-grouped-list > .ui:first-child {
   995    margin-top: 1px;
   996  }
   997  
   998  .lines-blame-btn {
   999    padding: 0 0 0 5px;
  1000    display: flex;
  1001    justify-content: center;
  1002  }
  1003  
  1004  .lines-num {
  1005    padding: 0 8px;
  1006    text-align: right !important;
  1007    color: var(--color-text-light-2);
  1008    width: 1%; /* this apparently needs to be a percentage so that code column stretches in diffs */
  1009    min-width: 72px;
  1010    white-space: nowrap;
  1011  }
  1012  
  1013  .code-diff .lines-num {
  1014    min-width: 50px;
  1015  }
  1016  
  1017  .lines-num span.bottom-line::after {
  1018    border-bottom: 1px solid var(--color-secondary);
  1019  }
  1020  
  1021  .lines-num span::after {
  1022    content: attr(data-line-number);
  1023    line-height: 20px !important;
  1024    padding: 0 10px;
  1025    display: block;
  1026  }
  1027  
  1028  .code-view .lines-num span::after {
  1029    cursor: pointer;
  1030  }
  1031  
  1032  .lines-type-marker {
  1033    vertical-align: top;
  1034    white-space: nowrap;
  1035  }
  1036  
  1037  .lines-num,
  1038  .lines-code {
  1039    font-size: 12px;
  1040    font-family: var(--fonts-monospace);
  1041    line-height: 20px;
  1042    padding-top: 0;
  1043    padding-bottom: 0;
  1044    vertical-align: top;
  1045  }
  1046  
  1047  .lines-num pre,
  1048  .lines-code pre,
  1049  .lines-num ol,
  1050  .lines-code ol {
  1051    background-color: inherit;
  1052    margin: 0;
  1053    padding: 0 !important;
  1054  }
  1055  
  1056  .lines-num pre li,
  1057  .lines-code pre li,
  1058  .lines-num ol li,
  1059  .lines-code ol li {
  1060    display: block;
  1061    width: calc(100% - 1ch);
  1062    padding-left: 1ch;
  1063  }
  1064  
  1065  .lines-escape {
  1066    width: 0;
  1067    white-space: nowrap;
  1068  }
  1069  
  1070  .lines-code {
  1071    padding-left: 5px;
  1072  }
  1073  
  1074  .file-view tr.active {
  1075    color: inherit !important;
  1076    background: inherit !important;
  1077  }
  1078  
  1079  .file-view tr.active .lines-num,
  1080  .file-view tr.active .lines-code {
  1081    background: var(--color-highlight-bg) !important;
  1082  }
  1083  
  1084  .file-view tr.active:last-of-type .lines-code {
  1085    border-bottom-right-radius: var(--border-radius);
  1086  }
  1087  
  1088  .file-view tr.active .lines-num {
  1089    position: relative;
  1090  }
  1091  
  1092  .file-view tr.active .lines-num::before {
  1093    content: "";
  1094    position: absolute;
  1095    left: 0;
  1096    width: 2px;
  1097    height: 100%;
  1098    background: var(--color-highlight-fg);
  1099  }
  1100  
  1101  .code-inner {
  1102    font: 12px var(--fonts-monospace);
  1103    white-space: pre-wrap;
  1104    word-break: break-all;
  1105    overflow-wrap: anywhere;
  1106    line-height: inherit; /* needed for inline code preview in markup */
  1107  }
  1108  
  1109  .blame .code-inner {
  1110    white-space: pre-wrap;
  1111    overflow-wrap: anywhere;
  1112  }
  1113  
  1114  .lines-commit {
  1115    vertical-align: top;
  1116    color: var(--color-text-light-1);
  1117    padding: 0 !important;
  1118    width: 1%;
  1119  }
  1120  
  1121  .lines-commit .blame-info {
  1122    width: min(26vw, 300px);
  1123    display: block;
  1124    padding: 0 0 0 6px;
  1125    line-height: 20px;
  1126    box-sizing: content-box;
  1127  }
  1128  
  1129  .lines-commit .blame-info .blame-data {
  1130    display: flex;
  1131    font-family: var(--fonts-regular);
  1132  }
  1133  
  1134  .lines-commit .blame-info .blame-data .blame-message {
  1135    flex-grow: 2;
  1136    overflow: hidden;
  1137    white-space: nowrap;
  1138    text-overflow: ellipsis;
  1139  }
  1140  
  1141  .lines-commit .blame-info .blame-data .blame-time,
  1142  .lines-commit .blame-info .blame-data .blame-avatar {
  1143    flex-shrink: 0;
  1144  }
  1145  
  1146  .blame-avatar {
  1147    display: flex;
  1148    align-items: center;
  1149    margin-right: 4px;
  1150  }
  1151  
  1152  .top-line-blame {
  1153    border-top: 1px solid var(--color-secondary);
  1154  }
  1155  
  1156  .code-view tr.top-line-blame:first-of-type {
  1157    border-top: none;
  1158  }
  1159  
  1160  .lines-code .bottom-line,
  1161  .lines-commit .bottom-line {
  1162    border-bottom: 1px solid var(--color-secondary);
  1163  }
  1164  
  1165  .code-view {
  1166    background: var(--color-code-bg);
  1167    border-radius: var(--border-radius);
  1168  }
  1169  
  1170  .code-view table {
  1171    width: 100%;
  1172  }
  1173  
  1174  .migrate .svg.gitea-git {
  1175    color: var(--color-git);
  1176  }
  1177  
  1178  .color-icon {
  1179    display: inline-block;
  1180    border-radius: var(--border-radius-full);
  1181    height: 14px;
  1182    width: 14px;
  1183  }
  1184  
  1185  .rss-icon {
  1186    display: inline-flex;
  1187    color: var(--color-text-light-1);
  1188  }
  1189  
  1190  table th[data-sortt-asc]:hover,
  1191  table th[data-sortt-desc]:hover {
  1192    background: var(--color-hover) !important;
  1193    cursor: pointer !important;
  1194  }
  1195  
  1196  table th[data-sortt-asc] .svg,
  1197  table th[data-sortt-desc] .svg {
  1198    margin-left: 0.25rem;
  1199  }
  1200  
  1201  .ui.dropdown .menu .item {
  1202    border-radius: 0;
  1203  }
  1204  
  1205  .ui.dropdown .menu .item:first-of-type {
  1206    border-radius: var(--border-radius) var(--border-radius) 0 0;
  1207  }
  1208  
  1209  .ui.dropdown .menu .item:last-of-type {
  1210    border-radius: 0 0 var(--border-radius) var(--border-radius);
  1211  }
  1212  
  1213  .ui.multiple.dropdown > .label {
  1214    box-shadow: 0 0 0 1px var(--color-secondary) inset;
  1215  }
  1216  
  1217  .emoji {
  1218    font-size: 1.25em;
  1219    line-height: var(--line-height-default);
  1220    font-style: normal !important;
  1221    font-weight: var(--font-weight-normal) !important;
  1222    vertical-align: -0.075em;
  1223  }
  1224  
  1225  .emoji img {
  1226    border-width: 0 !important;
  1227    margin: 0 !important;
  1228    width: 1em !important;
  1229    height: 1em !important;
  1230    vertical-align: -0.15em;
  1231  }
  1232  
  1233  .ui.tabular.menu .item,
  1234  .ui.secondary.pointing.menu .item {
  1235    padding: 11.55px 12px !important; /* match .dashboard-navbar in height */
  1236    color: var(--color-text-light-2);
  1237  }
  1238  
  1239  .ui.tabular.menu .item:hover,
  1240  .ui.secondary.pointing.menu a.item:hover {
  1241    color: var(--color-text);
  1242  }
  1243  
  1244  .ui.tabular.menu .active.item,
  1245  .ui.secondary.pointing.menu .active.item,
  1246  .resize-for-semibold::before {
  1247    font-weight: var(--font-weight-semibold);
  1248  }
  1249  
  1250  .resize-for-semibold::before {
  1251    content: attr(data-text);
  1252    visibility: hidden;
  1253    display: block;
  1254    height: 0;
  1255  }
  1256  
  1257  .flash-error details code,
  1258  .flash-warning details code {
  1259    display: block;
  1260    text-align: left;
  1261  }
  1262  
  1263  .truncated-item-container {
  1264    display: flex !important;
  1265    align-items: center;
  1266  }
  1267  
  1268  .ellipsis-button {
  1269    padding: 0 5px 8px !important;
  1270    display: inline-block !important;
  1271    font-weight: var(--font-weight-semibold) !important;
  1272    line-height: 6px !important;
  1273    vertical-align: middle !important;
  1274  }
  1275  
  1276  .truncated-item-name {
  1277    line-height: 2;
  1278    white-space: nowrap;
  1279    overflow: hidden;
  1280    text-overflow: ellipsis;
  1281    margin-top: -0.5em;
  1282    margin-bottom: -0.5em;
  1283  }
  1284  
  1285  .precolors {
  1286    display: flex;
  1287    flex-direction: column;
  1288    justify-content: center;
  1289    margin-left: 1em;
  1290  }
  1291  
  1292  .precolors .color {
  1293    display: inline-block;
  1294    width: 15px;
  1295    height: 15px;
  1296  }
  1297  
  1298  .ui.dropdown:not(.button) {
  1299    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 */
  1300  }
  1301  
  1302  /* dropdown has some kinds of icons:
  1303  - "> .dropdown.icon": the arrow for opening the dropdown
  1304  - "> .remove.icon": the "x" icon for clearing the dropdown, only used in selection dropdown
  1305  - "> .ui.label > .delete.icon": the "x" icon for removing a label item in multiple selection dropdown
  1306  */
  1307  
  1308  .ui.dropdown.mini.button,
  1309  .ui.dropdown.tiny.button {
  1310    padding-right: 20px;
  1311  }
  1312  .ui.dropdown.button {
  1313    padding-right: 22px;
  1314  }
  1315  .ui.dropdown.large.button {
  1316    padding-right: 24px;
  1317  }
  1318  
  1319  /* Gitea uses SVG images instead of Fomantic builtin "<i>" font icons, so we need to reset the icon styles */
  1320  .ui.ui.dropdown > .icon.icon {
  1321    position: initial; /* plain dropdown and button dropdown use flex layout for icons */
  1322    padding: 0;
  1323    margin: 0;
  1324    height: auto;
  1325  }
  1326  
  1327  .ui.ui.dropdown > .icon.icon:hover {
  1328    opacity: 1;
  1329  }
  1330  
  1331  .ui.ui.button.dropdown > .icon.icon,
  1332  .ui.ui.selection.dropdown > .icon.icon {
  1333    position: absolute; /* selection dropdown uses absolute layout for icons */
  1334    top: 50%;
  1335    transform: translateY(-50%);
  1336  }
  1337  
  1338  .ui.ui.dropdown > .dropdown.icon {
  1339    right: 0.5em;
  1340  }
  1341  
  1342  .ui.ui.dropdown > .remove.icon {
  1343    right: 2em;
  1344  }
  1345  
  1346  .btn,
  1347  .ui.ui.button,
  1348  .ui.ui.dropdown,
  1349  .flex-text-inline {
  1350    display: inline-flex;
  1351    align-items: center;
  1352    gap: .25rem;
  1353    vertical-align: middle;
  1354    min-width: 0; /* make ellipsis work */
  1355  }
  1356  
  1357  .ui.ui.dropdown.selection {
  1358    min-width: 14em; /* match the default min width */
  1359  }
  1360  
  1361  .ui.dropdown .ui.label .svg {
  1362    vertical-align: middle;
  1363  }
  1364  
  1365  .ui.ui.labeled.button {
  1366    gap: 0;
  1367    align-items: stretch;
  1368  }
  1369  
  1370  .flex-items-block > .item,
  1371  .flex-text-block {
  1372    display: flex;
  1373    align-items: center;
  1374    gap: .25rem;
  1375    min-width: 0;
  1376  }
  1377  
  1378  /* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content */
  1379  .ui.dropdown .menu.flex-items-menu > .item {
  1380    display: flex !important;
  1381    align-items: center;
  1382    gap: .5rem;
  1383    min-width: 0;
  1384  }
  1385  
  1386  .ui.dropdown.ellipsis-items-nowrap > .text {
  1387    overflow: hidden;
  1388    white-space: nowrap;
  1389    text-overflow: ellipsis;
  1390  }
  1391  
  1392  .ellipsis-items-nowrap > .item,
  1393  .ui.dropdown.ellipsis-items-nowrap .menu > .item {
  1394    white-space: nowrap !important;
  1395    overflow: hidden !important;
  1396    text-overflow: ellipsis !important;
  1397  }