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.

109 lines
1.4 KiB

4 years ago
  1. .column {
  2. flex: 1 0 auto;
  3. }
  4. .pinned-info {
  5. position: relative;
  6. opacity: 0.85;
  7. font-size: 15px;
  8. padding: 10px 20px;
  9. a {
  10. color: #3fadfd;
  11. }
  12. }
  13. .pinned-info__icon {
  14. .fa {
  15. position: absolute;
  16. bottom: 10px;
  17. right: 10px;
  18. cursor: pointer;
  19. }
  20. }
  21. div {
  22. &.status__info {
  23. & > a {
  24. &.status__display-name {
  25. display: inline-block;
  26. }
  27. }
  28. }
  29. }
  30. .gifv {
  31. & > video {
  32. width: 100%;
  33. max-height: 100%;
  34. }
  35. }
  36. .columns-area--mobile {
  37. .getting-started__trends {
  38. display: block;
  39. .trends__item {
  40. display: flex;
  41. }
  42. }
  43. }
  44. .status__quote__wrapper {
  45. margin-top:16px;
  46. border-left: 5px solid #dbdbdb80;
  47. background: #dbdbdb40;
  48. .status {
  49. padding-left:40px;
  50. .status__action-bar {
  51. display: none;
  52. }
  53. .status__avatar {
  54. transform: scale(0.5);
  55. transform-origin: 0% 0%;
  56. }
  57. }
  58. }
  59. @keyframes like {
  60. 0% {
  61. transform: scale(1);
  62. }
  63. 25% {
  64. transform: scale(1.75);
  65. }
  66. 100% {
  67. transform: scale(1);
  68. }
  69. }
  70. @keyframes unlike {
  71. 0% {
  72. transform: rotateY(0deg);
  73. }
  74. 50% {
  75. transform: rotateY(240deg);
  76. }
  77. 80% {
  78. transform: rotateY(140deg);
  79. }
  80. 100% {
  81. transform: rotateY(180deg);
  82. }
  83. }
  84. .no-reduce-motion .icon-button.star-icon {
  85. &.activate {
  86. & > .fa-heart {
  87. animation: like 1s linear;
  88. }
  89. }
  90. }
  91. .no-reduce-motion .icon-button.star-icon {
  92. &.deactivate {
  93. & > .fa-heart {
  94. animation: unlike 1s linear;
  95. }
  96. }
  97. }