/ docs / css / insiders.css
insiders.css
  1  @keyframes heart {
  2  
  3    0%,
  4    40%,
  5    80%,
  6    100% {
  7      transform: scale(1);
  8    }
  9  
 10    20%,
 11    60% {
 12      transform: scale(1.15);
 13    }
 14  }
 15  
 16  @keyframes vibrate {
 17    0%, 2%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18% {
 18      -webkit-transform: translate3d(-2px, 0, 0);
 19              transform: translate3d(-2px, 0, 0);
 20    }
 21    1%, 3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19% {
 22      -webkit-transform: translate3d(2px, 0, 0);
 23              transform: translate3d(2px, 0, 0);
 24    }
 25    20%, 100% {
 26      -webkit-transform: translate3d(0, 0, 0);
 27              transform: translate3d(0, 0, 0);
 28    }
 29  }
 30  
 31  .heart {
 32    color: #e91e63;
 33  }
 34  
 35  .pulse {
 36    animation: heart 1000ms infinite;
 37  }
 38  
 39  .vibrate {
 40    animation: vibrate 2000ms infinite;
 41  }
 42  
 43  .new-feature svg {
 44    fill: var(--md-accent-fg-color) !important;
 45  }
 46  
 47  a.insiders {
 48    color: #e91e63;
 49  }
 50  
 51  .sponsorship-list {
 52    width: 100%;
 53  }
 54  
 55  .sponsorship-item {
 56    border-radius: 100%;
 57    display: inline-block;
 58    height: 1.6rem;
 59    margin: 0.1rem;
 60    overflow: hidden;
 61    width: 1.6rem;
 62  }
 63  
 64  .sponsorship-item:focus, .sponsorship-item:hover {
 65    transform: scale(1.1);
 66  }
 67  
 68  .sponsorship-item img {
 69    filter: grayscale(100%) opacity(75%);
 70    height: auto;
 71    width: 100%;
 72  }
 73  
 74  .sponsorship-item:focus img, .sponsorship-item:hover img {
 75    filter: grayscale(0);
 76  }
 77  
 78  .sponsorship-item.private {
 79    background: var(--md-default-fg-color--lightest);
 80    color: var(--md-default-fg-color);
 81    font-size: .6rem;
 82    font-weight: 700;
 83    line-height: 1.6rem;
 84    text-align: center;
 85  }
 86  
 87  .mastodon {
 88    color: #897ff8;
 89    border-radius: 100%;
 90    box-shadow: inset 0 0 0 .05rem currentcolor;
 91    display: inline-block;
 92    height: 1.2rem !important;
 93    padding: .25rem;
 94    transition: all .25s;
 95    vertical-align: bottom !important;
 96    width: 1.2rem;
 97  }
 98  
 99  .premium-sponsors {
100    text-align: center;
101  }
102  
103  #silver-sponsors img {
104    height: 140px;
105  }
106  
107  #bronze-sponsors img {
108    height: 140px;
109  }
110  
111  #bronze-sponsors p {
112    display: flex;
113    flex-wrap: wrap;
114    justify-content: center;
115  }
116  
117  #bronze-sponsors a {
118    display: block;
119    flex-shrink: 0;
120  }
121  
122  .sponsors-total {
123    font-weight: bold;
124  }