[Summary view] [Print] [Text view]

   1  /*! This file is auto-generated */
   2  /*------------------------------------------------------------------------------
   3    28.0 - Site Icon
   4  ------------------------------------------------------------------------------*/
   5  
   6  .site-icon-section {
   7      --site-icon-removal: #b32d2e;
   8  }
   9  
  10  .site-icon-preview {
  11      --site-icon-input-border: #8c8f94;
  12      --site-icon-preview-background: #fff;
  13      --site-icon-preview-browser-top: #dcdcde;
  14      --site-icon-preview-browser-bottom: #a7aaad;
  15      --site-icon-preview-browser-border: rgba(255, 255, 255, 0.2);
  16      --site-icon-address-bar-background: #f0f0f1;
  17      --site-icon-address-bar-close: #646970;
  18      --site-icon-address-bar-text: #3c434a;
  19      --site-icon-shadow-1: rgba(0, 0, 0, 0.1);
  20      --site-icon-shadow-2: rgba(0, 0, 0, 0.2);
  21      --site-icon-shadow-3: rgba(0, 0, 0, 0.5);
  22  
  23      direction: initial;
  24      display: flex;
  25      height: 60px;
  26      padding: 8px 8px 0 0;
  27      align-items: flex-start;
  28      position: relative;
  29      overflow: hidden;
  30      box-sizing: border-box;
  31      border: 1px solid var(--site-icon-input-border);
  32      border-radius: 4px;
  33      background-color: var(--site-icon-preview-background);
  34      width: 275px;
  35  }
  36  
  37  @media (prefers-color-scheme: dark) {
  38      .site-icon-preview {
  39          --site-icon-preview-browser-top: #2c3338;
  40          --site-icon-preview-browser-bottom: #111;
  41          --site-icon-address-bar-background: #3c434a;
  42          --site-icon-address-bar-close: #f0f0f1;
  43          --site-icon-address-bar-text: #f0f0f1;
  44      }
  45  }
  46  
  47  .site-icon-preview.settings {
  48      height: 88px;
  49      padding: 16px 16px 0 0;
  50      width: 350px;
  51      margin: 0 0 16px 0;
  52  }
  53  
  54  .site-icon-preview.crop {
  55      width: 258px;
  56      height: 100%;
  57      display: grid;
  58      grid-template-columns: 8px 1fr;
  59      grid-template-rows: 64px 1fr;
  60      padding-right: 0;
  61      row-gap: 16px;
  62      direction: inherit;
  63  }
  64  
  65  .site-icon-preview.hidden {
  66      display: none;
  67  }
  68  
  69  .site-icon-preview .direction-wrap {
  70      grid-template-columns: 44px 1fr;
  71      gap: 8px;
  72      display: grid;
  73      direction: rtl;
  74      height: 100%;
  75      width: 100%;
  76  }
  77  
  78  .site-icon-preview.settings .direction-wrap {
  79      grid-template-columns: 58px 1fr;
  80      gap: 16px;
  81  }
  82  
  83  .site-icon-preview:after {
  84      --after-size: 150%;
  85      aspect-ratio: 1/1;
  86      content: "";
  87      display: block;
  88      position: absolute;
  89      top: 0;
  90      right: 0;
  91      width: var(--after-size);;
  92      transform: translate(calc(-1*(var(--after-size) * -0.125)), calc(var(--after-size) * -0.125));
  93      filter: blur(5px);
  94      opacity: 0.5;
  95      background: var(--site-icon-url);
  96  }
  97  
  98  .site-icon-preview .app-icon-preview {
  99      aspect-ratio: 1/1;
 100      border-radius: 10px;
 101      box-shadow: 0 1px 5px 0 var(--site-icon-shadow-3);
 102      flex-shrink: 0;
 103      width: 100%;
 104      z-index: 1;
 105  }
 106  
 107  .site-icon-preview-browser {
 108      display: flex;
 109      padding: 4px 12px 0 4px;
 110      align-items: flex-start;
 111      gap: 16px;
 112      flex: 1 0 0;
 113      z-index: 1;
 114      border-top-right-radius: 10px;
 115      border-top: 1px solid var(--site-icon-preview-browser-border);
 116      border-right: 1px solid var(--site-icon-preview-browser-border);
 117      background: linear-gradient(-180deg, var(--site-icon-preview-browser-top) 0%, var(--site-icon-preview-browser-bottom) 100%);
 118      box-shadow: 0 10px 22px 0 var(--site-icon-shadow-2);
 119  }
 120  
 121  .site-icon-preview .browser-buttons {
 122      width: 48px;
 123      height: 40px;
 124      fill: var(--site-icon-input-border);
 125  }
 126  
 127  .site-icon-preview-tab {
 128      padding: 8px;
 129      align-items: center;
 130      gap: 8px;
 131      flex: 1 0 0;
 132      border-radius: 4px;
 133      background-color: var(--site-icon-address-bar-background);
 134      box-shadow: 0 1px 3px 0 var(--site-icon-shadow-1);
 135      display: grid;
 136      grid-template-columns: 24px auto 24px;
 137  }
 138  
 139  .site-icon-preview-browser .browser-icon-preview {
 140      box-shadow: 0 0 20px 0 var(--site-icon-shadow-1);
 141  }
 142  
 143  .site-icon-preview-tab > img,
 144  .site-icon-preview-tab > svg {
 145      width: 24px;
 146      height: 24px;
 147  }
 148  
 149  .site-icon-preview-tab > svg {
 150      fill: var(--site-icon-address-bar-close);
 151  }
 152  
 153  .site-icon-preview-site-title {
 154      color: var(--site-icon-address-bar-text);
 155      text-overflow: ellipsis;
 156      white-space: nowrap;
 157      overflow: hidden;
 158      font-weight: 500;
 159  }
 160  
 161  .site-icon-preview-crop-modal .image-preview-wrap.app-icon-preview {
 162      width: 64px;
 163      height: 64px;
 164      margin: 0;
 165      grid-column: 2;
 166  }
 167  
 168  .site-icon-preview-crop-modal .site-icon-preview-browser {
 169      grid-column: 2;
 170  }
 171  
 172  .site-icon-preview-crop-modal .image-preview-wrap {
 173      overflow: hidden;
 174      aspect-ratio: 1/1;
 175  }
 176  
 177  .site-icon-preview-crop-modal .image-preview-wrap.browser {
 178      width: 24px;
 179      height: 24px;
 180  }
 181  
 182  button.reset.remove-site-icon {
 183      color: var(--site-icon-removal);
 184      text-decoration: none;
 185      border-color: transparent;
 186      box-shadow: none;
 187      background: transparent;
 188  }
 189  
 190  button.reset.remove-site-icon:focus,
 191  button.reset.remove-site-icon:hover {
 192      background: var(--site-icon-removal);
 193      color: #fff;
 194      border-color: var(--site-icon-removal);
 195      box-shadow: 0 0 0 1px var(--site-icon-removal);
 196  }
 197  
 198  .site-icon-action-buttons {
 199      display: flex;
 200      flex-wrap: wrap;
 201      gap: 10px;
 202  }