You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

182 lines
2.8 KiB

  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. @media screen and (max-width: $no-gap-breakpoint) {
  7. margin-bottom: 0;
  8. border-radius: 0;
  9. box-shadow: none;
  10. }
  11. &--headless {
  12. border-radius: 0;
  13. margin: 0;
  14. box-shadow: none;
  15. .detailed-status,
  16. .status {
  17. border-radius: 0 !important;
  18. }
  19. }
  20. div[data-component] {
  21. width: 100%;
  22. }
  23. .entry {
  24. background: $ui-base-color;
  25. .detailed-status,
  26. .status,
  27. .load-more {
  28. animation: none;
  29. }
  30. &:last-child {
  31. .detailed-status,
  32. .status,
  33. .load-more {
  34. border-bottom: 0;
  35. border-radius: 0 0 4px 4px;
  36. }
  37. }
  38. &:first-child {
  39. .detailed-status,
  40. .status,
  41. .load-more {
  42. border-radius: 4px 4px 0 0;
  43. }
  44. &:last-child {
  45. .detailed-status,
  46. .status,
  47. .load-more {
  48. border-radius: 4px;
  49. }
  50. }
  51. }
  52. @media screen and (max-width: 740px) {
  53. .detailed-status,
  54. .status,
  55. .load-more {
  56. border-radius: 0 !important;
  57. }
  58. }
  59. }
  60. &--highlighted .entry {
  61. background: lighten($ui-base-color, 8%);
  62. }
  63. }
  64. .button.logo-button {
  65. flex: 0 auto;
  66. font-size: 14px;
  67. background: $ui-highlight-color;
  68. color: $primary-text-color;
  69. text-transform: none;
  70. line-height: 36px;
  71. height: auto;
  72. padding: 3px 15px;
  73. border: 0;
  74. svg {
  75. width: 20px;
  76. height: auto;
  77. vertical-align: middle;
  78. margin-right: 5px;
  79. path:first-child {
  80. fill: $primary-text-color;
  81. }
  82. path:last-child {
  83. fill: $ui-highlight-color;
  84. }
  85. }
  86. &:active,
  87. &:focus,
  88. &:hover {
  89. background: lighten($ui-highlight-color, 10%);
  90. svg path:last-child {
  91. fill: lighten($ui-highlight-color, 10%);
  92. }
  93. }
  94. &:disabled,
  95. &.disabled {
  96. svg path:last-child {
  97. fill: $ui-primary-color;
  98. }
  99. &:active,
  100. &:focus,
  101. &:hover {
  102. background: $ui-primary-color;
  103. svg path:last-child {
  104. fill: $ui-primary-color;
  105. }
  106. }
  107. }
  108. &.button--destructive {
  109. &:active,
  110. &:focus,
  111. &:hover {
  112. background: $error-red;
  113. svg path:last-child {
  114. fill: $error-red;
  115. }
  116. }
  117. }
  118. @media screen and (max-width: $no-gap-breakpoint) {
  119. svg {
  120. display: none;
  121. }
  122. }
  123. }
  124. .embed,
  125. .public-layout {
  126. .detailed-status {
  127. padding: 15px;
  128. }
  129. .status {
  130. padding: 15px 15px 15px (48px + 15px * 2);
  131. min-height: 48px + 2px;
  132. &__avatar {
  133. left: 15px;
  134. top: 17px;
  135. }
  136. &__content {
  137. padding-top: 5px;
  138. }
  139. &__prepend {
  140. margin-left: 48px + 15px * 2;
  141. padding-top: 15px;
  142. }
  143. &__prepend-icon-wrapper {
  144. left: -32px;
  145. }
  146. .media-gallery,
  147. &__action-bar,
  148. .video-player {
  149. margin-top: 10px;
  150. }
  151. }
  152. }