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

     1  .image-diff-tabs {
     2    min-height: 60px;
     3  
     4  }
     5  .image-diff-tabs.is-loading .tab {
     6    display: none;
     7  }
     8  
     9  .image-diff-container {
    10    text-align: center;
    11    padding: 0.5em 0 1em;
    12  }
    13  
    14  .image-diff-container img {
    15    border: 1px solid var(--color-primary-light-7);
    16    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAG0lEQVQYlWN4+vTpf3SMDTAMBYXYBLFpHgoKAeiOf0SGE9kbAAAAAElFTkSuQmCC") right bottom var(--color-primary-light-7);
    17  }
    18  
    19  .image-diff-container .before-container {
    20    border: 1px solid var(--color-red);
    21    display: block;
    22  }
    23  
    24  .image-diff-container .after-container {
    25    border: 1px solid var(--color-green);
    26    display: block;
    27  }
    28  
    29  .image-diff-container .diff-side-by-side .side {
    30    display: inline-block;
    31    line-height: 0;
    32    vertical-align: top;
    33    margin: 0 1em;
    34  }
    35  
    36  .image-diff-container .diff-side-by-side .side .side-header {
    37    font-weight: var(--font-weight-semibold);
    38  }
    39  
    40  .image-diff-container .diff-swipe {
    41    margin: auto;
    42    padding: 1em 0;
    43  }
    44  
    45  .image-diff-container .diff-swipe .swipe-frame {
    46    position: absolute;
    47  }
    48  
    49  .image-diff-container .diff-swipe .swipe-frame .before-container {
    50    position: absolute;
    51  }
    52  
    53  .image-diff-container .diff-swipe .swipe-frame .swipe-container {
    54    position: absolute;
    55    right: 0;
    56    display: block;
    57    border-left: 2px solid var(--color-secondary-dark-8);
    58    height: 100%;
    59    overflow: hidden;
    60  }
    61  
    62  .image-diff-container .diff-swipe .swipe-frame .swipe-container .after-container {
    63    position: absolute;
    64    right: 0;
    65  }
    66  
    67  .image-diff-container .diff-swipe .swipe-frame .swipe-bar {
    68    position: absolute;
    69    height: 100%;
    70    top: 0;
    71    left: 0;
    72  }
    73  
    74  .image-diff-container .diff-swipe .swipe-frame .swipe-bar .handle {
    75    background: var(--color-secondary-dark-8);
    76    left: -5px;
    77    height: 12px;
    78    width: 12px;
    79    position: absolute;
    80    transform: rotate(45deg);
    81    box-sizing: border-box;
    82    display: flex;
    83    justify-content: center;
    84    align-items: center;
    85    cursor: pointer;
    86  }
    87  
    88  .image-diff-container .diff-swipe .swipe-frame .swipe-bar .top-handle {
    89    top: -12px;
    90  }
    91  
    92  .image-diff-container .diff-swipe .swipe-frame .swipe-bar .bottom-handle {
    93    bottom: -14px;
    94  }
    95  
    96  .image-diff-container .diff-overlay {
    97    margin: 0 auto;
    98  }
    99  
   100  .image-diff-container .diff-overlay .overlay-frame {
   101    margin: 1em auto 0;
   102    position: relative;
   103  }
   104  
   105  .image-diff-container .diff-overlay .before-container,
   106  .image-diff-container .diff-overlay .after-container {
   107    position: absolute;
   108  }
   109  
   110  .image-diff-container .diff-overlay input {
   111    max-width: 300px;
   112  }