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

     1  /* styles are based on node_modules/tippy.js/dist/tippy.css */
     2  
     3  /* class to hide tippy target elements on page load */
     4  .tippy-target {
     5    display: none !important;
     6  }
     7  
     8  /* show target element once it's been moved by tippy.js */
     9  .tippy-content .tippy-target {
    10    display: unset !important;
    11  }
    12  
    13  [data-tippy-root] {
    14    max-width: calc(100vw - 32px);
    15  }
    16  
    17  .tippy-box {
    18    position: relative;
    19    background-color: var(--color-menu);
    20    color: var(--color-text);
    21    border: 1px solid var(--color-secondary);
    22    border-radius: var(--border-radius);
    23    font-size: 1rem;
    24  }
    25  
    26  .tippy-content {
    27    position: relative;
    28    z-index: 1;
    29  }
    30  
    31  /* bare theme, no styling at all, except box-shadow */
    32  .tippy-box[data-theme="bare"] {
    33    border: none;
    34    box-shadow: 0 6px 18px var(--color-shadow);
    35  }
    36  
    37  .tippy-box[data-theme="bare"] .tippy-content {
    38    padding: 0;
    39    background: transparent;
    40  }
    41  
    42  /* tooltip theme for text tooltips */
    43  
    44  .tippy-box[data-theme="tooltip"] {
    45    background-color: var(--color-tooltip-bg);
    46    color: var(--color-tooltip-text);
    47    border: none;
    48  }
    49  
    50  .tippy-box[data-theme="tooltip"] .tippy-content {
    51    padding: 0.5rem 1rem;
    52  }
    53  
    54  .tippy-box[data-theme="tooltip"] .tippy-svg-arrow-inner,
    55  .tippy-box[data-theme="tooltip"] .tippy-svg-arrow-outer {
    56    fill: var(--color-tooltip-bg);
    57  }
    58  
    59  /* menu theme for .ui.menu */
    60  
    61  .tippy-box[data-theme="menu"] {
    62    background-color: var(--color-menu);
    63    color: var(--color-text);
    64    box-shadow: 0 6px 18px var(--color-shadow);
    65  }
    66  
    67  .tippy-box[data-theme="menu"] .tippy-content {
    68    padding: 4px 0;
    69  }
    70  
    71  .tippy-box[data-theme="menu"] .tippy-svg-arrow-inner {
    72    fill: var(--color-menu);
    73  }
    74  
    75  .tippy-box[data-theme="menu"] .item {
    76    display: flex;
    77    align-items: center;
    78    padding: 9px 18px;
    79    color: inherit;
    80    text-decoration: none;
    81    gap: 10px;
    82  }
    83  
    84  .tippy-box[data-theme="menu"] .item:hover {
    85    background: var(--color-hover);
    86  }
    87  
    88  .tippy-box[data-theme="menu"] .item:focus {
    89    background: var(--color-active);
    90  }
    91  
    92  /* box-with-header theme to look like .ui.attached.segment. can contain .ui.attached.header */
    93  
    94  .tippy-box[data-theme="box-with-header"] {
    95    box-shadow: 0 6px 18px var(--color-shadow);
    96  }
    97  
    98  .tippy-box[data-theme="box-with-header"] .tippy-content {
    99    background: var(--color-box-body);
   100    border-radius: var(--border-radius);
   101    padding: 0;
   102  }
   103  
   104  .tippy-box[data-theme="box-with-header"][data-placement^="top"] .tippy-svg-arrow-inner {
   105    fill: var(--color-box-body);
   106  }
   107  
   108  .tippy-box[data-theme="box-with-header"][data-placement^="bottom"] .tippy-svg-arrow-inner {
   109    fill: var(--color-box-header);
   110  }
   111  
   112  .tippy-box[data-placement^="top"] > .tippy-svg-arrow {
   113    bottom: 0;
   114  }
   115  
   116  .tippy-box[data-placement^="top"] > .tippy-svg-arrow::after,
   117  .tippy-box[data-placement^="top"] > .tippy-svg-arrow > svg {
   118    top: 16px;
   119    transform: rotate(180deg);
   120  }
   121  
   122  .tippy-box[data-placement^="bottom"] > .tippy-svg-arrow {
   123    top: 0;
   124  }
   125  
   126  .tippy-box[data-placement^="bottom"] > .tippy-svg-arrow > svg {
   127    bottom: 16px;
   128  }
   129  
   130  .tippy-box[data-placement^="left"] > .tippy-svg-arrow {
   131    right: 0;
   132  }
   133  
   134  .tippy-box[data-placement^="left"] > .tippy-svg-arrow::after,
   135  .tippy-box[data-placement^="left"] > .tippy-svg-arrow > svg {
   136    transform: rotate(90deg);
   137    top: calc(50% - 3px);
   138    left: 11px;
   139  }
   140  
   141  .tippy-box[data-placement^="right"] > .tippy-svg-arrow {
   142    left: 0;
   143  }
   144  
   145  .tippy-box[data-placement^="right"] > .tippy-svg-arrow::after,
   146  .tippy-box[data-placement^="right"] > .tippy-svg-arrow > svg {
   147    transform: rotate(-90deg);
   148    top: calc(50% - 3px);
   149    right: 11px;
   150  }
   151  
   152  .tippy-svg-arrow {
   153    width: 16px;
   154    height: 16px;
   155    text-align: initial;
   156  }
   157  
   158  .tippy-svg-arrow,
   159  .tippy-svg-arrow > svg {
   160    position: absolute;
   161  }
   162  
   163  .tippy-svg-arrow-outer {
   164    fill: var(--color-secondary);
   165  }
   166  
   167  .tippy-svg-arrow-inner {
   168    fill: var(--color-menu);
   169  }