app/javascript/flavours/glitch/styles/components/lists.scss

   1 .list-editor {
   2   background: $ui-base-color;
   3   flex-direction: column;
   4   border-radius: 8px;
   5   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
   6   width: 380px;
   7   overflow: hidden;
   8
   9   @media screen and (max-width: 420px) {
  10     width: 90%;
  11   }
  12
  13   h4 {
  14     padding: 15px 0;
  15     background: lighten($ui-base-color, 13%);
  16     font-weight: 500;
  17     font-size: 16px;
  18     text-align: center;
  19     border-radius: 8px 8px 0 0;
  20   }
  21
  22   .drawer__pager {
  23     height: 50vh;
  24   }
  25
  26   .drawer__inner {
  27     border-radius: 0 0 8px 8px;
  28
  29     &.backdrop {
  30       width: calc(100% - 60px);
  31       box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
  32       border-radius: 0 0 0 8px;
  33     }
  34   }
  35
  36   &__accounts {
  37     overflow-y: auto;
  38   }
  39
  40   .account__display-name {
  41     &:hover strong {
  42       text-decoration: none;
  43     }
  44   }
  45
  46   .account__avatar {
  47     cursor: default;
  48   }
  49
  50   .search {
  51     margin-bottom: 0;
  52   }
  53 }
  54
  55 .list-adder {
  56   background: $ui-base-color;
  57   flex-direction: column;
  58   border-radius: 8px;
  59   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
  60   width: 380px;
  61   overflow: hidden;
  62
  63   @media screen and (max-width: 420px) {
  64     width: 90%;
  65   }
  66
  67   &__account {
  68     background: lighten($ui-base-color, 13%);
  69   }
  70
  71   &__lists {
  72     background: lighten($ui-base-color, 13%);
  73     height: 50vh;
  74     border-radius: 0 0 8px 8px;
  75     overflow-y: auto;
  76   }
  77
  78   .list {
  79     padding: 10px;
  80     border-bottom: 1px solid lighten($ui-base-color, 8%);
  81   }
  82
  83   .list__wrapper {
  84     display: flex;
  85   }
  86
  87   .list__display-name {
  88     flex: 1 1 auto;
  89     overflow: hidden;
  90     text-decoration: none;
  91     font-size: 16px;
  92     padding: 10px;
  93   }
  94 }