cetirizine

An experimental matrix client written in reactjs utilizing tailwind and storybook
git clone git://archive.git.mtrnord.blog/MTRNord/cetirizine.git
Log | Files | Refs | README | LICENSE

avatar.scss (1077B)

      1 .avatar {
      2     position: relative;
      3     overflow: hidden;
      4 
      5     img {
      6         width: 100%;
      7         height: 100%;
      8         border-radius: 50%;
      9         color: transparent;
     10         object-fit: cover;
     11 
     12         &::after {
     13             border-radius: 50%;
     14             content: attr(alt);
     15             display: flex;
     16             align-items: center;
     17             position: absolute;
     18             top: 0;
     19             right: 0;
     20             bottom: 0;
     21             left: 0;
     22             color: white;
     23             background-color: var(--orange-500);
     24             white-space: pre;
     25             padding-left: calc(50% - 0.5ch);
     26             font-family: monospace;
     27             letter-spacing: 2rem;
     28         }
     29     }
     30 
     31     .online,
     32     .offline,
     33     .unknown {
     34         width: 0.75rem;
     35         height: 0.75rem;
     36         position: absolute;
     37         bottom: 0;
     38         right: 0;
     39         border-radius: 50%;
     40     }
     41 
     42     .online {
     43         background-color: var(--green-500);
     44     }
     45 
     46     .offline {
     47         background-color: var(--red-500);
     48     }
     49 
     50     .unknown {
     51         background-color: var(--gray-500);
     52     }
     53 }