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.

160 lines
2.7 KiB

  1. .card {
  2. display: flex;
  3. background: $darker-background-color;
  4. border: 1px solid darken($darker-background-color, 15%);
  5. box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1);
  6. .bio {
  7. flex-grow: 1;
  8. }
  9. .name {
  10. font-size: 24px;
  11. line-height: 18px * 1.5;
  12. color: $text-color;
  13. small {
  14. display: block;
  15. font-size: 14px;
  16. color: $lighter-text-color;
  17. }
  18. }
  19. .avatar {
  20. width: 96px;
  21. float: left;
  22. margin-right: 10px;
  23. padding: 10px;
  24. padding-left: 9px;
  25. margin-top: -30px;
  26. img {
  27. width: 94px;
  28. height: 94px;
  29. display: block;
  30. border: 2px solid $lighter-text-color;
  31. border-radius: 5px;
  32. }
  33. }
  34. }
  35. .activity-stream {
  36. clear: both;
  37. box-shadow: 4px 3px 0 rgba(0, 0, 0, 0.1);
  38. .entry {
  39. border-bottom: 1px solid darken($background-color, 10%);
  40. background: $background-color;
  41. border-left: 2px solid $primary-color;
  42. &.entry-reblog {
  43. border-left: 2px solid $tertiary-color;
  44. }
  45. &.entry-predecessor, &.entry-successor {
  46. border-left: 2px solid $lighter-text-color;
  47. background: darken($background-color, 5%);
  48. }
  49. &:last-child {
  50. border-bottom: 0;
  51. }
  52. }
  53. .entry__container {
  54. display: flex;
  55. }
  56. .avatar {
  57. width: 48px;
  58. padding: 10px;
  59. padding-left: 8px;
  60. padding-right: 0;
  61. padding-top: 12px;
  62. img {
  63. width: 48px;
  64. height: 48px;
  65. display: block;
  66. border-radius: 5px;
  67. }
  68. }
  69. .entry__container__container {
  70. flex-grow: 1;
  71. }
  72. .header {
  73. margin-bottom: 10px;
  74. padding: 10px;
  75. padding-bottom: 0;
  76. .name {
  77. text-decoration: none;
  78. color: $lighter-text-color;
  79. strong {
  80. color: $text-color;
  81. }
  82. &:hover {
  83. strong {
  84. text-decoration: underline;
  85. }
  86. }
  87. }
  88. }
  89. .pre-header {
  90. border-bottom: 1px solid darken($background-color, 10%);
  91. color: $tertiary-color;
  92. padding: 5px 10px;
  93. padding-left: 8px;
  94. clear: both;
  95. .name {
  96. color: $tertiary-color;
  97. font-weight: bold;
  98. text-decoration: none;
  99. &:hover {
  100. text-decoration: underline;
  101. }
  102. }
  103. }
  104. .content {
  105. font-size: 16px;
  106. padding: 0 10px;
  107. padding-left: 8px;
  108. }
  109. .time {
  110. text-decoration: none;
  111. color: $lighter-text-color;
  112. &:hover {
  113. text-decoration: underline;
  114. }
  115. }
  116. .counters {
  117. margin-top: 15px;
  118. color: $lighter-text-color;
  119. cursor: default;
  120. padding: 10px;
  121. padding-top: 0;
  122. .counter {
  123. display: inline-block;
  124. margin-right: 10px;
  125. color: $lighter-text-color;
  126. }
  127. .conversation-link {
  128. color: $primary-color;
  129. text-decoration: underline;
  130. float: right;
  131. }
  132. }
  133. }