app/javascript/flavours/glitch/styles/stream_entries.scss

   1 .activity-stream {
   2   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   3   border-radius: 4px;
   4   overflow: hidden;
   5   margin-bottom: 10px;
   6
   7   @media screen and (max-width: $no-gap-breakpoint) {
   8     margin-bottom: 0;
   9     border-radius: 0;
  10     box-shadow: none;
  11   }
  12
  13   &--headless {
  14     border-radius: 0;
  15     margin: 0;
  16     box-shadow: none;
  17
  18     .detailed-status,
  19     .status {
  20       border-radius: 0 !important;
  21     }
  22   }
  23
  24   div[data-component] {
  25     width: 100%;
  26   }
  27
  28   .entry {
  29     background: $ui-base-color;
  30
  31     .detailed-status,
  32     .status,
  33     .load-more {
  34       animation: none;
  35     }
  36
  37     &:last-child {
  38       .detailed-status,
  39       .status,
  40       .load-more {
  41         border-bottom: 0;
  42         border-radius: 0 0 4px 4px;
  43       }
  44     }
  45
  46     &:first-child {
  47       .detailed-status,
  48       .status,
  49       .load-more {
  50         border-radius: 4px 4px 0 0;
  51       }
  52
  53       &:last-child {
  54         .detailed-status,
  55         .status,
  56         .load-more {
  57           border-radius: 4px;
  58         }
  59       }
  60     }
  61
  62     @media screen and (max-width: 740px) {
  63       .detailed-status,
  64       .status,
  65       .load-more {
  66         border-radius: 0 !important;
  67       }
  68     }
  69   }
  70
  71   &--highlighted .entry {
  72     background: lighten($ui-base-color, 8%);
  73   }
  74 }
  75
  76 .button.logo-button {
  77   flex: 0 auto;
  78   font-size: 14px;
  79   background: $ui-highlight-color;
  80   color: $primary-text-color;
  81   text-transform: none;
  82   line-height: 36px;
  83   height: auto;
  84   padding: 3px 15px;
  85   border: 0;
  86
  87   svg {
  88     width: 20px;
  89     height: auto;
  90     vertical-align: middle;
  91     margin-right: 5px;
  92
  93     path:first-child {
  94       fill: $primary-text-color;
  95     }
  96
  97     path:last-child {
  98       fill: $ui-highlight-color;
  99     }
 100   }
 101
 102   &:active,
 103   &:focus,
 104   &:hover {
 105     background: lighten($ui-highlight-color, 10%);
 106
 107     svg path:last-child {
 108       fill: lighten($ui-highlight-color, 10%);
 109     }
 110   }
 111
 112   &.button--destructive {
 113     &:active,
 114     &:focus,
 115     &:hover {
 116       background: $error-red;
 117
 118       svg path:last-child {
 119         fill: $error-red;
 120       }
 121     }
 122   }
 123
 124   @media screen and (max-width: $no-gap-breakpoint) {
 125     svg {
 126       display: none;
 127     }
 128   }
 129 }
 130
 131 .embed,
 132 .public-layout {
 133   .detailed-status {
 134     padding: 15px;
 135   }
 136
 137   .status {
 138     padding: 15px 15px 15px (48px + 15px * 2);
 139     min-height: 48px + 2px;
 140
 141     &__avatar {
 142       left: 15px;
 143       top: 17px;
 144     }
 145
 146     &__content {
 147       padding-top: 5px;
 148     }
 149
 150     &__prepend {
 151       padding: 8px 0;
 152       padding-bottom: 2px;
 153       margin: initial;
 154       margin-left: 48px + 15px * 2;
 155       padding-top: 15px;
 156     }
 157
 158     &__prepend-icon-wrapper {
 159       position: absolute;
 160       margin: initial;
 161       float: initial;
 162       width: auto;
 163       left: -32px;
 164     }
 165
 166     .media-gallery,
 167     &__action-bar,
 168     .video-player {
 169       margin-top: 10px;
 170     }
 171   }
 172 }
 173
 174 // Styling from upstream's WebUI, as public pages use the same layout
 175 .embed,
 176 .public-layout {
 177   .status {
 178     .status__info .status__display-name {
 179       display: block;
 180       max-width: 100%;
 181       padding-right: 25px;
 182     }
 183
 184     .status__info {
 185       font-size: 15px;
 186       display: initial;
 187     }
 188
 189     .status__relative-time {
 190       color: $dark-text-color;
 191       float: right;
 192       font-size: 14px;
 193       width: auto;
 194       margin: initial;
 195       padding: initial;
 196     }
 197
 198     .status__info .status__display-name {
 199       display: block;
 200       max-width: 100%;
 201       padding-right: 25px;
 202       margin: initial;
 203     }
 204
 205     .status__avatar {
 206       height: 48px;
 207       position: absolute;
 208       width: 48px;
 209       margin: initial;
 210     }
 211   }
 212 }