stream_element.scss 3.66 KB
Newer Older
1
.stream-element,
2
.photo {
3 4 5
  & > .media {
    margin: 0px;
  }
6
  &.deleting {
7 8
    opacity: .3;

9
    .control-icons { display: none !important; }
10
  }
11
}
12

13 14
.photo {
  > .media {
15
    overflow: visible;
16
    position: relative;
17 18

    .control-icons {
19
      background: $framed-background;
20 21 22 23 24 25
      border-radius: 4px;
      padding-left: 4px;
      position: absolute;
      right: 4px;
      text-align: center;
      top: 1px;
arlogn's avatar
arlogn committed
26 27
    }
  }
28

arlogn's avatar
arlogn committed
29
  .thumbnail {
30
    background: $framed-background;
augier's avatar
augier committed
31
    border-radius: 0;
32
    box-shadow: $card-shadow;
33 34 35 36 37 38 39 40 41 42 43
    height: 240px;
    margin: 0 0 15px;
    padding: 10px;

    // Vertically align the image
    text-align: center;
    white-space: nowrap;

    &:hover,
    &:focus,
    &:active {
44
      border-color: $border-grey;
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
      text-decoration: none;
    }

    &::before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }

    .big-photo {
      display: inline;
      margin-left: -4px;
      max-height: 200px;
      vertical-align: middle;
    }
arlogn's avatar
arlogn committed
61 62 63
  }
}

64
#main-stream .stream-element {
65
  margin-bottom: 20px;
66
  border: 1px solid $border-grey;
augier's avatar
augier committed
67 68
  box-shadow: $card-shadow;

69 70 71 72 73 74
  &.highlighted {
    border-left: 3px solid $brand-primary;
    padding-left: 8px;
  }
}

75
.stream-element {
76
  background-color: $framed-background;
77 78
  padding: 10px;

79
  & > .media {
80 81 82
    &.shield-active .nsfw-hidden { display: none; }
    &:not(.shield-active) .nsfw-shield { display: none; }
    &:not(.shield-off) .nsfw-off { display: none; }
83 84 85 86 87 88
    & > .img > .avatar {
      margin-top: 5px;
      &.small {
        height: 50px;
        width: 50px;
      }
89
    }
90
    .author-name {
91 92
      font-weight: bold;
      margin-bottom: 4px;
93
      unicode-bidi: isolate;
94 95 96
    }
    .feedback {
      margin-top: 5px;
97 98
      font-size: $font-size-small;
      line-height: $font-size-small;
99
    }
100 101 102 103 104 105 106 107 108 109 110

    .post-content {
      .markdown-content {
        padding: .8em 0 .4em;
      }

      p:last-of-type {
        margin-bottom: 0;
      }
    }

111 112 113 114 115 116
    .nsfw-shield {
      color: $text-grey;
      padding: 5px 10px;
      background-color: $background-grey;
      border: 1px solid $border-grey;
      border-radius: 3px;
117
    }
118 119 120 121 122 123 124 125 126 127
  }

  .permalink {
    @include transition(opacity);
    opacity: 0;
  }

  &:hover .permalink {
    opacity: .8;
    &:hover { opacity: 1; }
128 129
  }

130
  div.reshare {
131
    border-left: 2px solid $border-grey;
132
    margin-top: 3px;
133

Fla's avatar
Fla committed
134
    & > .media .avatar {
135
      margin-top: 5px;
136 137 138
      height: 30px;
      width: 30px;
    }
139 140 141 142 143
  }

  .collapsible {
    overflow: hidden;
    position: relative;
144 145 146 147 148
    .markdown-content hr {
      width: 85%;
      margin: 0.8em auto;
      border-top: 1px solid $border-grey;
    }
149 150 151 152 153 154 155 156 157 158 159 160 161
    .expander {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 30px;
      text-align: center;
      line-height: 48px;
      font-size: .8em;
      color: $grey;
      text-shadow: 0 0 7px #FFF;
      cursor: pointer;
      border-bottom: 2px solid $border-grey;
162
      border-radius: 0 0 3px 3px;
163 164 165 166
      @include linear-gradient(rgba(255,255,255,0) , #EEE, 0%, 95%);
      background-color: transparent;
    }
  }
167

168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198
  .likes,
  .reshares {
    font-size: 12px;
    line-height: 16px;
    margin-top: 10px;

    .author-name,
    .bd {
      display: inline-block;
    }

    .author-name { margin-right: 3px; }

    .entypo-heart,
    .entypo-reshare {
      display: inline-block;
      font-size: 16px;
      line-height: $line-height-computed;
      margin-right: 5px;
      vertical-align: top;
    }
  }

  .status-message-location {
    color: $text-grey;
    font-size: $font-size-small;
  }

  .leaflet-control-zoom {
    display: block;
  }
199 200 201 202 203

  .no-posts-info {
    margin-bottom: 10px;
    margin-top: 10px;
  }
204
}