[Summary view] [Print] [Text view]

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