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.

3626 lines
60 KiB

7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
  1. @import 'variables';
  2. .app-body {
  3. -webkit-overflow-scrolling: touch;
  4. -ms-overflow-style: -ms-autohiding-scrollbar;
  5. }
  6. .button {
  7. background-color: darken($ui-highlight-color, 3%);
  8. border: 10px none;
  9. border-radius: 4px;
  10. box-sizing: border-box;
  11. color: $primary-text-color;
  12. cursor: pointer;
  13. display: inline-block;
  14. font-family: inherit;
  15. font-size: 14px;
  16. font-weight: 500;
  17. height: 36px;
  18. letter-spacing: 0;
  19. line-height: 36px;
  20. overflow: hidden;
  21. padding: 0 16px;
  22. position: relative;
  23. text-align: center;
  24. text-transform: uppercase;
  25. text-decoration: none;
  26. text-overflow: ellipsis;
  27. transition: all 100ms ease-in;
  28. white-space: nowrap;
  29. width: auto;
  30. &:active,
  31. &:focus,
  32. &:hover {
  33. background-color: lighten($ui-highlight-color, 7%);
  34. transition: all 200ms ease-out;
  35. }
  36. &:disabled {
  37. background-color: $ui-primary-color;
  38. cursor: default;
  39. }
  40. &.button-secondary {
  41. //
  42. }
  43. &.button--block {
  44. display: block;
  45. width: 100%;
  46. }
  47. }
  48. .column__wrapper {
  49. display: flex;
  50. flex: 1 1 auto;
  51. position: relative;
  52. }
  53. .column-icon {
  54. background: lighten($ui-base-color, 4%);
  55. color: $ui-primary-color;
  56. cursor: pointer;
  57. font-size: 16px;
  58. padding: 15px;
  59. position: absolute;
  60. right: 0;
  61. top: -48px;
  62. z-index: 3;
  63. &:hover {
  64. color: lighten($ui-primary-color, 7%);
  65. }
  66. }
  67. .icon-button {
  68. display: inline-block;
  69. padding: 0;
  70. color: lighten($ui-base-color, 26%);
  71. border: none;
  72. background: transparent;
  73. cursor: pointer;
  74. transition: color 100ms ease-in;
  75. &:hover,
  76. &:active,
  77. &:focus {
  78. color: lighten($ui-base-color, 33%);
  79. transition: color 200ms ease-out;
  80. }
  81. &.disabled {
  82. color: lighten($ui-base-color, 13%);
  83. cursor: default;
  84. }
  85. &.active {
  86. color: $ui-highlight-color;
  87. }
  88. &::-moz-focus-inner {
  89. border: 0;
  90. }
  91. &::-moz-focus-inner,
  92. &:focus,
  93. &:active {
  94. outline: 0 !important;
  95. }
  96. &.inverted {
  97. color: lighten($ui-base-color, 33%);
  98. &:hover,
  99. &:active,
  100. &:focus {
  101. color: lighten($ui-base-color, 26%);
  102. }
  103. &.active {
  104. color: $ui-highlight-color;
  105. }
  106. &.disabled {
  107. color: $ui-primary-color;
  108. }
  109. }
  110. &.overlayed {
  111. box-sizing: content-box;
  112. background: rgba($base-overlay-background, 0.6);
  113. color: rgba($primary-text-color, 0.7);
  114. border-radius: 4px;
  115. padding: 2px;
  116. &:hover {
  117. background: rgba($base-overlay-background, 0.9);
  118. }
  119. }
  120. }
  121. .text-icon-button {
  122. color: lighten($ui-base-color, 33%);
  123. border: none;
  124. background: transparent;
  125. cursor: pointer;
  126. font-weight: 600;
  127. font-size: 11px;
  128. padding: 0 3px;
  129. line-height: 27px;
  130. outline: 0;
  131. transition: color 100ms ease-in;
  132. &:hover,
  133. &:active,
  134. &:focus {
  135. color: lighten($ui-base-color, 26%);
  136. transition: color 200ms ease-out;
  137. }
  138. &.disabled {
  139. color: lighten($ui-base-color, 13%);
  140. cursor: default;
  141. }
  142. &.active {
  143. color: $ui-highlight-color;
  144. }
  145. &::-moz-focus-inner {
  146. border: 0;
  147. }
  148. &::-moz-focus-inner,
  149. &:focus,
  150. &:active {
  151. outline: 0 !important;
  152. }
  153. }
  154. .dropdown--active .icon-button {
  155. color: $ui-highlight-color;
  156. }
  157. .dropdown--active::after {
  158. content: "";
  159. display: block;
  160. position: absolute;
  161. width: 0;
  162. height: 0;
  163. border-style: solid;
  164. border-width: 0 4.5px 7.8px;
  165. border-color: transparent transparent $ui-secondary-color;
  166. bottom: 8px;
  167. right: 104px;
  168. }
  169. .invisible {
  170. font-size: 0;
  171. line-height: 0;
  172. display: inline-block;
  173. width: 0;
  174. }
  175. .ellipsis {
  176. &::after {
  177. content: "";
  178. }
  179. }
  180. .lightbox .icon-button {
  181. color: $ui-base-color;
  182. }
  183. .compose-form {
  184. padding: 10px;
  185. }
  186. .compose-form__warning {
  187. color: darken($ui-secondary-color, 65%);
  188. margin-bottom: 15px;
  189. background: $ui-primary-color;
  190. box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
  191. padding: 8px 10px;
  192. border-radius: 4px;
  193. font-size: 13px;
  194. font-weight: 400;
  195. strong {
  196. color: darken($ui-secondary-color, 65%);
  197. font-weight: 500;
  198. }
  199. a {
  200. color: darken($ui-primary-color, 33%);
  201. font-weight: 500;
  202. text-decoration: underline;
  203. &:hover,
  204. &:active,
  205. &:focus {
  206. text-decoration: none;
  207. }
  208. }
  209. }
  210. .compose-form__modifiers {
  211. color: $ui-base-color;
  212. font-family: inherit;
  213. font-size: 14px;
  214. background: $simple-background-color;
  215. border-radius: 0 0 4px;
  216. }
  217. .compose-form__buttons-wrapper {
  218. display: flex;
  219. justify-content: space-between;
  220. }
  221. .compose-form__buttons {
  222. padding: 10px;
  223. background: darken($simple-background-color, 8%);
  224. box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05);
  225. border-radius: 0 0 4px 4px;
  226. display: flex;
  227. .icon-button {
  228. box-sizing: content-box;
  229. padding: 0 3px;
  230. }
  231. }
  232. .compose-form__upload-button-icon {
  233. line-height: 27px;
  234. }
  235. .compose-form__sensitive-button {
  236. display: none;
  237. &.compose-form__sensitive-button--visible {
  238. display: block;
  239. }
  240. .compose-form__sensitive-button__icon {
  241. line-height: 27px;
  242. }
  243. }
  244. .compose-form__upload-wrapper {
  245. overflow: hidden;
  246. }
  247. .compose-form__uploads-wrapper {
  248. display: flex;
  249. padding: 5px;
  250. }
  251. .compose-form__upload {
  252. flex: 1 1 0;
  253. margin: 5px;
  254. }
  255. .compose-form__upload-thumbnail {
  256. border-radius: 4px;
  257. background-position: center;
  258. background-size: cover;
  259. background-repeat: no-repeat;
  260. height: 100px;
  261. width: 100%;
  262. }
  263. .compose-form__upload-cancel {
  264. background-size: cover;
  265. border-radius: 4px;
  266. height: 100px;
  267. width: 100px;
  268. }
  269. .compose-form__label {
  270. display: block;
  271. line-height: 24px;
  272. vertical-align: middle;
  273. &.with-border {
  274. border-top: 1px solid $ui-base-color;
  275. padding-top: 10px;
  276. }
  277. .compose-form__label__text {
  278. display: inline-block;
  279. vertical-align: middle;
  280. margin-bottom: 14px;
  281. margin-left: 8px;
  282. color: $ui-primary-color;
  283. }
  284. }
  285. .compose-form__textarea,
  286. .follow-form__input {
  287. background: $simple-background-color;
  288. &:disabled {
  289. background: $ui-secondary-color;
  290. }
  291. }
  292. .compose-form__autosuggest-wrapper {
  293. position: relative;
  294. .emoji-picker__dropdown {
  295. position: absolute;
  296. right: 5px;
  297. top: 5px;
  298. &.dropdown--active::after {
  299. border-color: transparent transparent $base-border-color;
  300. bottom: -1px;
  301. right: 8px;
  302. }
  303. }
  304. }
  305. .compose-form__publish {
  306. display: flex;
  307. min-width: 0;
  308. }
  309. .compose-form__publish-button-wrapper {
  310. overflow: hidden;
  311. padding-top: 10px;
  312. }
  313. .emojione {
  314. display: inline-block;
  315. font-size: inherit;
  316. vertical-align: middle;
  317. margin: -.2ex .15em .2ex;
  318. width: 16px;
  319. height: 16px;
  320. img {
  321. width: auto;
  322. }
  323. }
  324. .reply-indicator {
  325. border-radius: 4px 4px 0 0;
  326. position: relative;
  327. bottom: -2px;
  328. background: $ui-primary-color;
  329. padding: 10px;
  330. }
  331. .reply-indicator__header {
  332. margin-bottom: 5px;
  333. overflow: hidden;
  334. }
  335. .reply-indicator__cancel {
  336. float: right;
  337. line-height: 24px;
  338. }
  339. .reply-indicator__display-name {
  340. color: $ui-base-color;
  341. display: block;
  342. max-width: 100%;
  343. line-height: 24px;
  344. overflow: hidden;
  345. padding-right: 25px;
  346. text-decoration: none;
  347. }
  348. .reply-indicator__display-avatar {
  349. float: left;
  350. margin-right: 5px;
  351. }
  352. .status__content--with-action {
  353. cursor: pointer;
  354. }
  355. .status__content,
  356. .reply-indicator__content {
  357. font-size: 15px;
  358. line-height: 20px;
  359. word-wrap: break-word;
  360. font-weight: 400;
  361. overflow: hidden;
  362. white-space: pre-wrap;
  363. .emojione {
  364. width: 18px;
  365. height: 18px;
  366. }
  367. p {
  368. margin-bottom: 20px;
  369. &:last-child {
  370. margin-bottom: 0;
  371. }
  372. }
  373. a {
  374. color: $ui-secondary-color;
  375. text-decoration: none;
  376. &:hover {
  377. text-decoration: underline;
  378. .fa {
  379. color: lighten($ui-base-color, 40%);
  380. }
  381. }
  382. &.mention {
  383. &:hover {
  384. text-decoration: none;
  385. span {
  386. text-decoration: underline;
  387. }
  388. }
  389. }
  390. .fa {
  391. color: lighten($ui-base-color, 30%);
  392. }
  393. }
  394. .status__content__spoiler-link {
  395. background: lighten($ui-base-color, 30%);
  396. &:hover {
  397. background: lighten($ui-base-color, 33%);
  398. text-decoration: none;
  399. }
  400. }
  401. .status__content__text {
  402. display: none;
  403. &.status__content__text--visible {
  404. display: block;
  405. }
  406. }
  407. }
  408. .status__content__spoiler-link {
  409. display: inline-block;
  410. border-radius: 2px;
  411. background: transparent;
  412. border: 0;
  413. color: lighten($ui-base-color, 8%);
  414. font-weight: 500;
  415. font-size: 11px;
  416. padding: 0 6px;
  417. text-transform: uppercase;
  418. line-height: inherit;
  419. cursor: pointer;
  420. }
  421. .status__prepend-icon-wrapper {
  422. left: -26px;
  423. position: absolute;
  424. }
  425. .status {
  426. padding: 8px 10px;
  427. padding-left: 68px;
  428. position: relative;
  429. min-height: 48px;
  430. border-bottom: 1px solid lighten($ui-base-color, 8%);
  431. cursor: default;
  432. @keyframes fade {
  433. 0% { opacity: 0; }
  434. 100% { opacity: 1; }
  435. }
  436. opacity: 1;
  437. animation: fade 150ms linear;
  438. &.status-direct {
  439. background: lighten($ui-base-color, 8%);
  440. .icon-button.disabled {
  441. color: lighten($ui-base-color, 16%);
  442. }
  443. }
  444. &.light {
  445. .status__relative-time {
  446. color: $ui-primary-color;
  447. }
  448. .status__display-name {
  449. color: $ui-base-color;
  450. }
  451. .display-name {
  452. strong {
  453. color: $ui-base-color;
  454. }
  455. span {
  456. color: $ui-primary-color;
  457. }
  458. }
  459. .status__content {
  460. color: $ui-base-color;
  461. a {
  462. color: $ui-highlight-color;
  463. }
  464. a.status__content__spoiler-link {
  465. color: $primary-text-color;
  466. background: $ui-primary-color;
  467. &:hover {
  468. background: lighten($ui-primary-color, 8%);
  469. }
  470. }
  471. }
  472. }
  473. }
  474. .notification-favourite {
  475. .status.status-direct {
  476. background: transparent;
  477. .icon-button.disabled {
  478. color: lighten($ui-base-color, 13%);
  479. }
  480. }
  481. }
  482. .status__relative-time {
  483. color: lighten($ui-base-color, 26%);
  484. float: right;
  485. font-size: 14px;
  486. }
  487. .status__display-name {
  488. color: lighten($ui-base-color, 26%);
  489. }
  490. .status__info .status__display-name {
  491. display: block;
  492. max-width: 100%;
  493. padding-right: 25px;
  494. }
  495. .status__info {
  496. font-size: 15px;
  497. }
  498. .status-check-box {
  499. border-bottom: 1px solid lighten($ui-base-color, 8%);
  500. display: flex;
  501. .status__content {
  502. background: lighten($ui-base-color, 4%);
  503. flex: 1 1 auto;
  504. padding: 10px;
  505. }
  506. }
  507. .status-check-box-toggle {
  508. align-items: center;
  509. display: flex;
  510. flex: 0 0 auto;
  511. justify-content: center;
  512. padding: 10px;
  513. }
  514. .status__prepend {
  515. margin-left: 68px;
  516. color: lighten($ui-base-color, 26%);
  517. padding: 8px 0;
  518. padding-bottom: 2px;
  519. font-size: 14px;
  520. position: relative;
  521. .status__display-name strong {
  522. color: lighten($ui-base-color, 26%);
  523. }
  524. }
  525. .status__action-bar {
  526. align-items: center;
  527. display: flex;
  528. margin-top: 10px;
  529. }
  530. .status__action-bar-button {
  531. float: left;
  532. margin-right: 18px;
  533. }
  534. .status__action-bar-dropdown {
  535. float: left;
  536. height: 18px;
  537. width: 18px;
  538. }
  539. .detailed-status__action-bar-dropdown {
  540. flex: 1 1 auto;
  541. display: flex;
  542. align-items: center;
  543. justify-content: center;
  544. position: relative;
  545. .dropdown {
  546. display: block;
  547. width: 18px;
  548. height: 18px;
  549. }
  550. .dropdown--active {
  551. .dropdown__content.dropdown__left {
  552. left: 20px;
  553. right: initial;
  554. }
  555. &::after {
  556. bottom: initial;
  557. margin-left: 7px;
  558. margin-top: -7px;
  559. right: initial;
  560. }
  561. }
  562. }
  563. .detailed-status {
  564. background: lighten($ui-base-color, 4%);
  565. padding: 14px 10px;
  566. .status__content {
  567. font-size: 19px;
  568. line-height: 24px;
  569. .emojione {
  570. width: 22px;
  571. height: 22px;
  572. }
  573. }
  574. }
  575. .detailed-status__meta {
  576. margin-top: 15px;
  577. color: lighten($ui-base-color, 26%);
  578. font-size: 14px;
  579. line-height: 18px;
  580. }
  581. .detailed-status__action-bar {
  582. background: lighten($ui-base-color, 4%);
  583. border-top: 1px solid lighten($ui-base-color, 8%);
  584. border-bottom: 1px solid lighten($ui-base-color, 8%);
  585. display: flex;
  586. flex-direction: row;
  587. padding: 10px 0;
  588. }
  589. .detailed-status__link {
  590. color: inherit;
  591. text-decoration: none;
  592. }
  593. .detailed-status__favorites,
  594. .detailed-status__reblogs {
  595. display: inline-block;
  596. font-weight: 500;
  597. font-size: 12px;
  598. margin-left: 6px;
  599. }
  600. .reply-indicator__content {
  601. color: $ui-base-color;
  602. font-size: 14px;
  603. a {
  604. color: lighten($ui-base-color, 20%);
  605. }
  606. }
  607. .account {
  608. padding: 10px;
  609. border-bottom: 1px solid lighten($ui-base-color, 8%);
  610. .account__display-name {
  611. flex: 1 1 auto;
  612. display: block;
  613. color: $ui-primary-color;
  614. overflow: hidden;
  615. text-decoration: none;
  616. font-size: 14px;
  617. }
  618. }
  619. .account__wrapper {
  620. display: flex;
  621. }
  622. .account__avatar-wrapper {
  623. float: left;
  624. margin-left: 12px;
  625. margin-right: 12px;
  626. }
  627. .account__avatar {
  628. @include avatar-radius();
  629. position: relative;
  630. cursor: pointer;
  631. &-inline {
  632. display: inline-block;
  633. vertical-align: middle;
  634. margin-right: 5px;
  635. }
  636. }
  637. .account__avatar-overlay {
  638. @include avatar-size(48px);
  639. &-base {
  640. @include avatar-radius();
  641. @include avatar-size(36px);
  642. }
  643. &-overlay {
  644. @include avatar-radius();
  645. @include avatar-size(24px);
  646. position: absolute;
  647. bottom: 0;
  648. right: 0;
  649. z-index: 1;
  650. }
  651. }
  652. .account__relationship {
  653. height: 18px;
  654. padding: 10px;
  655. }
  656. .account__header {
  657. flex: 0 0 auto;
  658. background: lighten($ui-base-color, 4%);
  659. text-align: center;
  660. background-size: cover;
  661. background-position: center;
  662. position: relative;
  663. & > div {
  664. background: rgba(lighten($ui-base-color, 4%), 0.9);
  665. padding: 20px 10px;
  666. }
  667. .account__header__content {
  668. color: $ui-secondary-color;
  669. }
  670. .account__header__display-name {
  671. color: $primary-text-color;
  672. display: inline-block;
  673. font-size: 20px;
  674. line-height: 27px;
  675. font-weight: 500;
  676. }
  677. .account__header__username {
  678. color: $ui-highlight-color;
  679. font-size: 14px;
  680. font-weight: 400;
  681. display: block;
  682. margin-bottom: 10px;
  683. }
  684. }
  685. .account__header__content {
  686. color: $ui-primary-color;
  687. font-size: 14px;
  688. font-weight: 400;
  689. overflow: hidden;
  690. word-break: normal;
  691. word-wrap: break-word;
  692. p {
  693. margin-bottom: 20px;
  694. &:last-child {
  695. margin-bottom: 0;
  696. }
  697. }
  698. a {
  699. color: inherit;
  700. text-decoration: underline;
  701. &:hover {
  702. text-decoration: none;
  703. }
  704. }
  705. }
  706. .account__header__display-name {
  707. .emojione {
  708. width: 25px;
  709. height: 25px;
  710. }
  711. }
  712. .account__action-bar {
  713. border-top: 1px solid lighten($ui-base-color, 8%);
  714. border-bottom: 1px solid lighten($ui-base-color, 8%);
  715. line-height: 36px;
  716. overflow: hidden;
  717. flex: 0 0 auto;
  718. display: flex;
  719. }
  720. .account__action-bar-dropdown {
  721. flex: 1 1 auto;
  722. padding: 10px;
  723. .dropdown--active {
  724. .dropdown__content.dropdown__right {
  725. left: 6px;
  726. right: initial;
  727. }
  728. &::after {
  729. bottom: initial;
  730. margin-left: 11px;
  731. margin-top: -7px;
  732. right: initial;
  733. }
  734. }
  735. }
  736. .account__action-bar-links {
  737. display: flex;
  738. flex: 1 1 auto;
  739. line-height: 18px;
  740. }
  741. .account__action-bar__tab {
  742. text-decoration: none;
  743. overflow: hidden;
  744. width: 80px;
  745. border-left: 1px solid lighten($ui-base-color, 8%);
  746. padding: 10px 5px;
  747. & > span {
  748. display: block;
  749. text-transform: uppercase;
  750. font-size: 11px;
  751. color: $ui-primary-color;
  752. }
  753. strong {
  754. display: block;
  755. font-size: 15px;
  756. font-weight: 500;
  757. color: $primary-text-color;
  758. }
  759. abbr {
  760. color: lighten($ui-base-color, 26%);
  761. }
  762. }
  763. .account__header__avatar {
  764. background-size: 90px 90px;
  765. display: block;
  766. height: 90px;
  767. margin: 0 auto 10px;
  768. overflow: hidden;
  769. width: 90px;
  770. }
  771. .account-authorize {
  772. padding: 14px 10px;
  773. .detailed-status__display-name {
  774. display: block;
  775. margin-bottom: 15px;
  776. overflow: hidden;
  777. }
  778. }
  779. .account-authorize__avatar {
  780. float: left;
  781. margin-right: 10px;
  782. }
  783. .status__display-name,
  784. .status__relative-time,
  785. .detailed-status__display-name,
  786. .detailed-status__datetime,
  787. .detailed-status__application,
  788. .account__display-name {
  789. text-decoration: none;
  790. }
  791. .status__display-name,
  792. .account__display-name {
  793. strong {
  794. color: $primary-text-color;
  795. }
  796. &.muted {
  797. .emojione {
  798. opacity: 0.5;
  799. }
  800. }
  801. }
  802. .status__display-name,
  803. .reply-indicator__display-name,
  804. .detailed-status__display-name,
  805. .account__display-name {
  806. &:hover strong {
  807. text-decoration: underline;
  808. }
  809. }
  810. .account__display-name strong {
  811. display: block;
  812. }
  813. .detailed-status__application,
  814. .detailed-status__datetime {
  815. color: inherit;
  816. }
  817. .detailed-status__display-name {
  818. color: $ui-secondary-color;
  819. display: block;
  820. line-height: 24px;
  821. margin-bottom: 15px;
  822. overflow: hidden;
  823. strong,
  824. span {
  825. display: block;
  826. }
  827. strong {
  828. font-size: 16px;
  829. color: $primary-text-color;
  830. }
  831. }
  832. .detailed-status__display-avatar {
  833. float: left;
  834. margin-right: 10px;
  835. }
  836. .status__avatar {
  837. height: 48px;
  838. left: 10px;
  839. position: absolute;
  840. top: 10px;
  841. width: 48px;
  842. }
  843. .muted {
  844. .status__content p,
  845. .status__content a {
  846. color: lighten($ui-base-color, 26%);
  847. }
  848. .status__display-name strong {
  849. color: lighten($ui-base-color, 26%);
  850. }
  851. .status__avatar {
  852. opacity: 0.5;
  853. }
  854. a.status__content__spoiler-link {
  855. background: lighten($ui-base-color, 26%);
  856. color: lighten($ui-base-color, 4%);
  857. &:hover {
  858. background: lighten($ui-base-color, 29%);
  859. text-decoration: none;
  860. }
  861. }
  862. }
  863. .notification__message {
  864. margin-left: 68px;
  865. padding: 8px 0;
  866. padding-bottom: 0;
  867. cursor: default;
  868. color: $ui-primary-color;
  869. font-size: 15px;
  870. position: relative;
  871. .fa {
  872. color: $ui-highlight-color;
  873. }
  874. }
  875. .notification__favourite-icon-wrapper {
  876. left: -26px;
  877. position: absolute;
  878. .star-icon {
  879. color: $gold-star;
  880. }
  881. }
  882. .star-icon.active {
  883. color: $gold-star;
  884. }
  885. .notification__display-name {
  886. color: inherit;
  887. font-weight: 500;
  888. text-decoration: none;
  889. &:hover {
  890. color: $primary-text-color;
  891. text-decoration: underline;
  892. }
  893. }
  894. .display-name {
  895. display: block;
  896. max-width: 100%;
  897. overflow: hidden;
  898. text-overflow: ellipsis;
  899. white-space: nowrap;
  900. }
  901. .display-name__html {
  902. font-weight: 500;
  903. }
  904. .display-name__account {
  905. font-size: 14px;
  906. }
  907. .status__relative-time,
  908. .detailed-status__datetime {
  909. &:hover {
  910. text-decoration: underline;
  911. }
  912. }
  913. .image-loader {
  914. position: relative;
  915. &.image-loader--loading {
  916. .image-loader__preview-canvas {
  917. filter: blur(2px);
  918. }
  919. }
  920. .image-loader__img {
  921. position: absolute;
  922. top: 0;
  923. left: 0;
  924. right: 0;
  925. width: 100%;
  926. height: 100%;
  927. background-image: none;
  928. }
  929. }
  930. .navigation-bar {
  931. padding: 10px;
  932. display: flex;
  933. flex-shrink: 0;
  934. cursor: default;
  935. color: $ui-primary-color;
  936. strong {
  937. color: $primary-text-color;
  938. }
  939. .permalink {
  940. text-decoration: none;
  941. }
  942. }
  943. .navigation-bar__profile {
  944. flex: 1 1 auto;
  945. margin-left: 8px;
  946. }
  947. .navigation-bar__profile-account {
  948. display: block;
  949. font-weight: 500;
  950. }
  951. .navigation-bar__profile-edit {
  952. color: inherit;
  953. text-decoration: none;
  954. }
  955. .dropdown {
  956. display: inline-block;
  957. }
  958. .dropdown__content {
  959. display: none;
  960. position: absolute;
  961. }
  962. .dropdown__sep {
  963. border-bottom: 1px solid darken($ui-secondary-color, 8%);
  964. margin: 5px 7px 6px;
  965. padding-top: 1px;
  966. }
  967. .dropdown--active .dropdown__content {
  968. display: block;
  969. line-height: 18px;
  970. max-width: 311px;
  971. right: 0;
  972. text-align: left;
  973. z-index: 9999;
  974. & > ul {
  975. list-style: none;
  976. background: $ui-secondary-color;
  977. padding: 4px 0;
  978. border-radius: 4px;
  979. box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
  980. min-width: 140px;
  981. position: relative;
  982. }
  983. &.dropdown__right {
  984. right: 0;
  985. }
  986. &.dropdown__left {
  987. & > ul {
  988. left: -98px;
  989. }
  990. }
  991. & > ul > li > a {
  992. font-size: 13px;
  993. line-height: 18px;
  994. display: block;
  995. padding: 4px 14px;
  996. box-sizing: border-box;
  997. text-decoration: none;
  998. background: $ui-secondary-color;
  999. color: $ui-base-color;
  1000. overflow: hidden;
  1001. text-overflow: ellipsis;
  1002. white-space: nowrap;
  1003. &:focus {
  1004. outline: 0;
  1005. }
  1006. &:hover {
  1007. background: $ui-highlight-color;
  1008. color: $ui-secondary-color;
  1009. }
  1010. }
  1011. }
  1012. .dropdown__icon {
  1013. vertical-align: middle;
  1014. }
  1015. .static-content {
  1016. padding: 10px;
  1017. padding-top: 20px;
  1018. color: lighten($ui-base-color, 26%);
  1019. h1 {
  1020. font-size: 16px;
  1021. font-weight: 500;
  1022. margin-bottom: 40px;
  1023. text-align: center;
  1024. }
  1025. p {
  1026. font-size: 13px;
  1027. margin-bottom: 20px;
  1028. }
  1029. }
  1030. .columns-area {
  1031. display: flex;
  1032. flex: 1 1 auto;
  1033. flex-direction: row;
  1034. justify-content: flex-start;
  1035. overflow-x: auto;
  1036. position: relative;
  1037. }
  1038. @media screen and (min-width: 360px) {
  1039. .columns-area {
  1040. padding: 10px;
  1041. }
  1042. }
  1043. .column {
  1044. width: 330px;
  1045. position: relative;
  1046. box-sizing: border-box;
  1047. display: flex;
  1048. flex-direction: column;
  1049. > .scrollable {
  1050. background: $ui-base-color;
  1051. }
  1052. }
  1053. .ui {
  1054. flex: 0 0 auto;
  1055. display: flex;
  1056. flex-direction: column;
  1057. width: 100%;
  1058. height: 100%;
  1059. background: darken($ui-base-color, 7%);
  1060. }
  1061. .drawer {
  1062. width: 300px;
  1063. box-sizing: border-box;
  1064. display: flex;
  1065. flex-direction: column;
  1066. overflow-y: hidden;
  1067. }
  1068. .drawer__tab {
  1069. display: block;
  1070. flex: 1 1 auto;
  1071. padding: 15px;
  1072. padding-bottom: 13px;
  1073. color: $ui-primary-color;
  1074. text-decoration: none;
  1075. text-align: center;
  1076. font-size: 16px;
  1077. border-bottom: 2px solid transparent;
  1078. }
  1079. .column,
  1080. .drawer {
  1081. flex: 1 1 100%;
  1082. overflow: hidden;
  1083. @supports(display: grid) { // hack to fix Chrome <57
  1084. contain: strict;
  1085. }
  1086. }
  1087. @media screen and (min-width: 360px) {
  1088. .tabs-bar {
  1089. margin: 10px;
  1090. margin-bottom: 0;
  1091. }
  1092. .search {
  1093. margin-bottom: 10px;
  1094. }
  1095. }
  1096. @media screen and (max-width: 1024px) {
  1097. .column,
  1098. .drawer {
  1099. width: 100%;
  1100. padding: 0;
  1101. }
  1102. .columns-area {
  1103. flex-direction: column;
  1104. }
  1105. .search__input,
  1106. .autosuggest-textarea__textarea {
  1107. font-size: 16px;
  1108. }
  1109. }
  1110. @media screen and (min-width: 1025px) {
  1111. .columns-area {
  1112. padding: 0;
  1113. }
  1114. .column,
  1115. .drawer {
  1116. flex: 0 0 auto;
  1117. padding: 10px;
  1118. padding-left: 5px;
  1119. padding-right: 5px;
  1120. &:first-child {
  1121. padding-left: 10px;
  1122. }
  1123. &:last-child {
  1124. padding-right: 10px;
  1125. }
  1126. }
  1127. .columns-area > div {
  1128. .column,
  1129. .drawer {
  1130. padding-left: 5px;
  1131. padding-right: 5px;
  1132. }
  1133. }
  1134. }
  1135. .drawer__pager {
  1136. box-sizing: border-box;
  1137. padding: 0;
  1138. flex-grow: 1;
  1139. position: relative;
  1140. overflow: hidden;
  1141. display: flex;
  1142. }
  1143. .drawer__inner {
  1144. position: absolute;
  1145. top: 0;
  1146. left: 0;
  1147. background: lighten($ui-base-color, 13%);
  1148. box-sizing: border-box;
  1149. padding: 0;
  1150. display: flex;
  1151. flex-direction: column;
  1152. overflow: hidden;
  1153. overflow-y: auto;
  1154. width: 100%;
  1155. height: 100%;
  1156. &.darker {
  1157. background: $ui-base-color;
  1158. }
  1159. }
  1160. .pseudo-drawer {
  1161. background: lighten($ui-base-color, 13%);
  1162. font-size: 13px;
  1163. text-align: left;
  1164. }
  1165. .drawer__header {
  1166. flex: 0 0 auto;
  1167. font-size: 16px;
  1168. background: lighten($ui-base-color, 8%);
  1169. margin-bottom: 10px;
  1170. display: flex;
  1171. flex-direction: row;
  1172. a {
  1173. transition: background 100ms ease-in;
  1174. &:hover {
  1175. background: lighten($ui-base-color, 3%);
  1176. transition: background 200ms ease-out;
  1177. }
  1178. }
  1179. }
  1180. .tabs-bar {
  1181. display: flex;
  1182. background: lighten($ui-base-color, 8%);
  1183. flex: 0 0 auto;
  1184. overflow-y: auto;
  1185. }
  1186. .tabs-bar__link {
  1187. display: block;
  1188. flex: 1 1 auto;
  1189. padding: 15px 10px;
  1190. color: $primary-text-color;
  1191. text-decoration: none;
  1192. text-align: center;
  1193. font-size: 14px;
  1194. font-weight: 500;
  1195. border-bottom: 2px solid lighten($ui-base-color, 8%);
  1196. transition: all 200ms linear;
  1197. .fa {
  1198. font-weight: 400;
  1199. font-size: 16px;
  1200. }
  1201. &.active {
  1202. border-bottom: 2px solid $ui-highlight-color;
  1203. color: $ui-highlight-color;
  1204. }
  1205. &:hover,
  1206. &:focus,
  1207. &:active {
  1208. @media screen and (min-width: 1025px) {
  1209. background: lighten($ui-base-color, 14%);
  1210. transition: all 100ms linear;
  1211. }
  1212. }
  1213. span {
  1214. margin-left: 5px;
  1215. display: none;
  1216. }
  1217. }
  1218. @media screen and (min-width: 600px) {
  1219. .tabs-bar__link {
  1220. span {
  1221. display: inline;
  1222. }
  1223. }
  1224. }
  1225. @media screen and (min-width: 1025px) {
  1226. .tabs-bar {
  1227. display: none;
  1228. }
  1229. }
  1230. .scrollable {
  1231. overflow-y: scroll;
  1232. overflow-x: hidden;
  1233. flex: 1 1 auto;
  1234. backface-visibility: hidden;
  1235. -webkit-overflow-scrolling: touch;
  1236. @supports(display: grid) { // hack to fix Chrome <57
  1237. contain: strict;
  1238. }
  1239. &.optionally-scrollable {
  1240. overflow-y: auto;
  1241. }
  1242. }
  1243. .column-back-button {
  1244. background: lighten($ui-base-color, 4%);
  1245. color: $ui-highlight-color;
  1246. cursor: pointer;
  1247. flex: 0 0 auto;
  1248. font-size: 16px;
  1249. padding: 15px;
  1250. z-index: 3;
  1251. &:hover {
  1252. text-decoration: underline;
  1253. }
  1254. }
  1255. .column-header__back-button {
  1256. background: lighten($ui-base-color, 4%);
  1257. border: 0;
  1258. font-family: inherit;
  1259. color: $ui-highlight-color;
  1260. cursor: pointer;
  1261. flex: 0 0 auto;
  1262. font-size: 16px;
  1263. padding: 0 5px 0 0;
  1264. z-index: 3;
  1265. &:hover {
  1266. text-decoration: underline;
  1267. }
  1268. }
  1269. .column-back-button__icon {
  1270. display: inline-block;
  1271. margin-right: 5px;
  1272. }
  1273. .column-back-button--slim {
  1274. position: relative;
  1275. }
  1276. .column-back-button--slim-button {
  1277. cursor: pointer;
  1278. flex: 0 0 auto;
  1279. font-size: 16px;
  1280. padding: 15px;
  1281. position: absolute;
  1282. right: 0;
  1283. top: -48px;
  1284. }
  1285. .react-toggle {
  1286. display: inline-block;
  1287. position: relative;
  1288. cursor: pointer;
  1289. background-color: transparent;
  1290. border: 0;
  1291. padding: 0;
  1292. user-select: none;
  1293. -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
  1294. -webkit-tap-highlight-color: transparent;
  1295. }
  1296. .react-toggle-screenreader-only {
  1297. border: 0;
  1298. clip: rect(0 0 0 0);
  1299. height: 1px;
  1300. margin: -1px;
  1301. overflow: hidden;
  1302. padding: 0;
  1303. position: absolute;
  1304. width: 1px;
  1305. }
  1306. .react-toggle--disabled {
  1307. cursor: not-allowed;
  1308. opacity: 0.5;
  1309. transition: opacity 0.25s;
  1310. }
  1311. .react-toggle-track {
  1312. width: 50px;
  1313. height: 24px;
  1314. padding: 0;
  1315. border-radius: 30px;
  1316. background-color: $ui-base-color;
  1317. transition: all 0.2s ease;
  1318. }
  1319. .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
  1320. background-color: darken($ui-base-color, 10%);
  1321. }
  1322. .react-toggle--checked .react-toggle-track {
  1323. background-color: $ui-highlight-color;
  1324. }
  1325. .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
  1326. background-color: lighten($ui-highlight-color, 10%);
  1327. }
  1328. .react-toggle-track-check {
  1329. position: absolute;
  1330. width: 14px;
  1331. height: 10px;
  1332. top: 0;
  1333. bottom: 0;
  1334. margin-top: auto;
  1335. margin-bottom: auto;
  1336. line-height: 0;
  1337. left: 8px;
  1338. opacity: 0;
  1339. transition: opacity 0.25s ease;
  1340. }
  1341. .react-toggle--checked .react-toggle-track-check {
  1342. opacity: 1;
  1343. transition: opacity 0.25s ease;
  1344. }
  1345. .react-toggle-track-x {
  1346. position: absolute;
  1347. width: 10px;
  1348. height: 10px;
  1349. top: 0;
  1350. bottom: 0;
  1351. margin-top: auto;
  1352. margin-bottom: auto;
  1353. line-height: 0;
  1354. right: 10px;
  1355. opacity: 1;
  1356. transition: opacity 0.25s ease;
  1357. }
  1358. .react-toggle--checked .react-toggle-track-x {
  1359. opacity: 0;
  1360. }
  1361. .react-toggle-thumb {
  1362. transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  1363. position: absolute;
  1364. top: 1px;
  1365. left: 1px;
  1366. width: 22px;
  1367. height: 22px;
  1368. border: 1px solid $ui-base-color;
  1369. border-radius: 50%;
  1370. background-color: darken($simple-background-color, 2%);
  1371. box-sizing: border-box;
  1372. transition: all 0.25s ease;
  1373. }
  1374. .react-toggle--checked .react-toggle-thumb {
  1375. left: 27px;
  1376. border-color: $ui-highlight-color;
  1377. }
  1378. .column-link {
  1379. background: lighten($ui-base-color, 8%);
  1380. color: $primary-text-color;
  1381. display: block;
  1382. font-size: 16px;
  1383. padding: 15px;
  1384. text-decoration: none;
  1385. &:hover {
  1386. background: lighten($ui-base-color, 11%);
  1387. }
  1388. &.hidden-on-mobile {
  1389. @media screen and (max-width: 1024px) {
  1390. display: none;
  1391. }
  1392. }
  1393. }
  1394. .column-link__icon {
  1395. display: inline-block;
  1396. margin-right: 5px;
  1397. }
  1398. .column-subheading {
  1399. background: $ui-base-color;
  1400. color: lighten($ui-base-color, 26%);
  1401. padding: 8px 20px;
  1402. font-size: 12px;
  1403. font-weight: 500;
  1404. text-transform: uppercase;
  1405. cursor: default;
  1406. }
  1407. .autosuggest-textarea,
  1408. .spoiler-input {
  1409. position: relative;
  1410. }
  1411. .autosuggest-textarea__textarea,
  1412. .spoiler-input__input {
  1413. display: block;
  1414. box-sizing: border-box;
  1415. width: 100%;
  1416. margin: 0;
  1417. color: $ui-base-color;
  1418. padding: 10px;
  1419. font-family: inherit;
  1420. font-size: 14px;
  1421. resize: vertical;
  1422. border: 0;
  1423. outline: 0;
  1424. &:focus {
  1425. outline: 0;
  1426. }
  1427. @media screen and (max-width: 600px) {
  1428. font-size: 16px;
  1429. }
  1430. }
  1431. .spoiler-input__input {
  1432. border-radius: 4px;
  1433. }
  1434. .autosuggest-textarea__textarea {
  1435. min-height: 100px;
  1436. background: $simple-background-color;
  1437. border-radius: 4px 4px 0 0;
  1438. padding-bottom: 0;
  1439. padding-right: 10px + 22px;
  1440. resize: none;
  1441. @media screen and (max-width: 600px) {
  1442. height: 100px !important; // prevent auto-resize textarea
  1443. resize: vertical;
  1444. }
  1445. }
  1446. .autosuggest-textarea__suggestions {
  1447. display: none;
  1448. position: absolute;
  1449. top: 100%;
  1450. width: 100%;
  1451. z-index: 99;
  1452. box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
  1453. background: $ui-secondary-color;
  1454. color: $ui-base-color;
  1455. font-size: 14px;
  1456. &.autosuggest-textarea__suggestions--visible {
  1457. display: block;
  1458. }
  1459. }
  1460. .autosuggest-textarea__suggestions__item {
  1461. padding: 10px;
  1462. cursor: pointer;
  1463. &:hover {
  1464. background: darken($ui-secondary-color, 10%);
  1465. }
  1466. &.selected {
  1467. background: $ui-highlight-color;
  1468. color: $base-border-color;
  1469. }
  1470. }
  1471. .autosuggest-account {
  1472. overflow: hidden;
  1473. }
  1474. .autosuggest-account-icon {
  1475. float: left;
  1476. margin-right: 5px;
  1477. }
  1478. .autosuggest-status {
  1479. overflow: hidden;
  1480. white-space: nowrap;
  1481. text-overflow: ellipsis;
  1482. strong {
  1483. font-weight: 500;
  1484. }
  1485. }
  1486. .character-counter__wrapper {
  1487. line-height: 36px;
  1488. margin-right: 16px;
  1489. padding-top: 10px;
  1490. }
  1491. .character-counter {
  1492. cursor: default;
  1493. font-size: 16px;
  1494. }
  1495. .character-counter--over {
  1496. color: $warning-red;
  1497. }
  1498. .getting-started__wrapper {
  1499. position: relative;
  1500. flex: 0 0 auto;
  1501. }
  1502. .getting-started__footer {
  1503. display: flex;
  1504. flex-direction: column;
  1505. }
  1506. .getting-started {
  1507. box-sizing: border-box;
  1508. padding-bottom: 235px;
  1509. background: url('../images/mastodon-getting-started.png') no-repeat 0 100%;
  1510. flex: 1 0 auto;
  1511. p {
  1512. color: $ui-secondary-color;
  1513. }
  1514. a {
  1515. color: lighten($ui-base-color, 26%);
  1516. }
  1517. }
  1518. .setting-text {
  1519. color: $ui-primary-color;
  1520. background: transparent;
  1521. border: none;
  1522. border-bottom: 2px solid $ui-primary-color;
  1523. box-sizing: border-box;
  1524. display: block;
  1525. font-family: inherit;
  1526. margin-bottom: 10px;
  1527. padding: 7px 0;
  1528. width: 100%;
  1529. &:focus,
  1530. &:active {
  1531. color: $primary-text-color;
  1532. border-bottom-color: $ui-highlight-color;
  1533. }
  1534. @media screen and (max-width: 600px) {
  1535. font-size: 16px;
  1536. }
  1537. }
  1538. @import 'boost';
  1539. button.icon-button i.fa-retweet {
  1540. background-position: 0 0;
  1541. height: 19px;
  1542. transition: background-position 0.9s steps(10);
  1543. transition-duration: 0s;
  1544. vertical-align: middle;
  1545. width: 22px;
  1546. &::before {
  1547. display: none !important;
  1548. }
  1549. }
  1550. button.icon-button.active i.fa-retweet {
  1551. transition-duration: 0.9s;
  1552. background-position: 0 100%;
  1553. }
  1554. .status-card {
  1555. display: flex;
  1556. cursor: pointer;
  1557. font-size: 14px;
  1558. border: 1px solid lighten($ui-base-color, 8%);
  1559. border-radius: 4px;
  1560. color: lighten($ui-base-color, 26%);
  1561. margin-top: 14px;
  1562. text-decoration: none;
  1563. overflow: hidden;
  1564. &:hover {
  1565. background: lighten($ui-base-color, 8%);
  1566. }
  1567. }
  1568. .status-card-video,
  1569. .status-card-rich,
  1570. .status-card-photo {
  1571. margin-top: 14px;
  1572. overflow: hidden;
  1573. iframe {
  1574. width: 100%;
  1575. height: auto;
  1576. }
  1577. }
  1578. .status-card-photo {
  1579. display: block;
  1580. text-decoration: none;
  1581. img {
  1582. display: block;
  1583. width: 100%;
  1584. height: auto;
  1585. margin: 0;
  1586. }
  1587. }
  1588. .status-card-video {
  1589. position: relative;
  1590. width: 100%;
  1591. height: auto;
  1592. padding-top: 56.25%;
  1593. iframe {
  1594. position: absolute;
  1595. top: 0;
  1596. left: 0;
  1597. bottom: 0;
  1598. right: 0;
  1599. width: 1px;
  1600. min-width: 100%;
  1601. height: 1px;
  1602. min-height: 100%;
  1603. margin: auto;
  1604. }
  1605. }
  1606. .status-card__title {
  1607. display: block;
  1608. font-weight: 500;
  1609. margin-bottom: 5px;
  1610. color: $ui-primary-color;
  1611. overflow: hidden;
  1612. text-overflow: ellipsis;
  1613. white-space: nowrap;
  1614. }
  1615. .status-card__content {
  1616. flex: 1 1 auto;
  1617. overflow: hidden;
  1618. padding: 14px 14px 14px 8px;
  1619. }
  1620. .status-card__description {
  1621. color: $ui-primary-color;
  1622. }
  1623. .status-card__host {
  1624. display: block;
  1625. margin-top: 5px;
  1626. font-size: 13px;
  1627. }
  1628. .status-card__image {
  1629. flex: 0 0 100px;
  1630. background: lighten($ui-base-color, 8%);
  1631. }
  1632. .status-card__image-image {
  1633. border-radius: 4px 0 0 4px;
  1634. display: block;
  1635. height: auto;
  1636. margin: 0;
  1637. width: 100%;
  1638. }
  1639. .load-more {
  1640. display: block;
  1641. color: lighten($ui-base-color, 26%);
  1642. background-color: transparent;
  1643. border: 0;
  1644. font-size: inherit;
  1645. text-align: center;
  1646. line-height: inherit;
  1647. margin: 0;
  1648. padding: 15px;
  1649. width: 100%;
  1650. clear: both;
  1651. &:hover {
  1652. background: lighten($ui-base-color, 2%);
  1653. }
  1654. }
  1655. .missing-indicator {
  1656. text-align: center;
  1657. font-size: 16px;
  1658. font-weight: 500;
  1659. color: lighten($ui-base-color, 16%);
  1660. background: $ui-base-color;
  1661. cursor: default;
  1662. display: flex;
  1663. flex: 1 1 auto;
  1664. align-items: center;
  1665. justify-content: center;
  1666. & > div {
  1667. background: url('../images/mastodon-not-found.png') no-repeat center -50px;
  1668. padding-top: 210px;
  1669. width: 100%;
  1670. }
  1671. }
  1672. .column-header__wrapper {
  1673. position: relative;
  1674. flex: 0 0 auto;
  1675. &.active {
  1676. &::before {
  1677. display: block;
  1678. content: "";
  1679. position: absolute;
  1680. top: 35px;
  1681. left: 0;
  1682. right: 0;
  1683. margin: 0 auto;
  1684. width: 60%;
  1685. pointer-events: none;
  1686. height: 28px;
  1687. z-index: 1;
  1688. background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
  1689. }
  1690. }
  1691. }
  1692. .column-header {
  1693. padding: 15px;
  1694. font-size: 16px;
  1695. background: lighten($ui-base-color, 4%);
  1696. flex: 0 0 auto;
  1697. cursor: pointer;
  1698. position: relative;
  1699. z-index: 2;
  1700. outline: 0;
  1701. &.active {
  1702. box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3);
  1703. .column-header__icon {
  1704. color: $ui-highlight-color;
  1705. text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4);
  1706. }
  1707. }
  1708. &.hidden-on-mobile {
  1709. @media screen and (max-width: 1024px) {
  1710. display: none;
  1711. }
  1712. }
  1713. &:focus,
  1714. &:active {
  1715. outline: 0;
  1716. }
  1717. }
  1718. .column-header__buttons {
  1719. position: absolute;
  1720. right: 0;
  1721. top: 0;
  1722. height: 100%;
  1723. display: flex;
  1724. height: 48px;
  1725. }
  1726. .column-header__button {
  1727. background: lighten($ui-base-color, 4%);
  1728. border: 0;
  1729. color: $ui-primary-color;
  1730. cursor: pointer;
  1731. font-size: 16px;
  1732. padding: 0 15px;
  1733. &:hover {
  1734. color: lighten($ui-primary-color, 7%);
  1735. }
  1736. &.active {
  1737. color: $primary-text-color;
  1738. background: lighten($ui-base-color, 8%);
  1739. &:hover {
  1740. color: $primary-text-color;
  1741. background: lighten($ui-base-color, 8%);
  1742. }
  1743. }
  1744. }
  1745. .column-header__collapsible {
  1746. max-height: 70vh;
  1747. overflow: hidden;
  1748. overflow-y: auto;
  1749. color: $ui-primary-color;
  1750. transition: max-height 150ms ease-in-out, opacity 300ms linear;
  1751. opacity: 1;
  1752. &.collapsed {
  1753. max-height: 0;
  1754. opacity: 0.5;
  1755. }
  1756. &.animating {
  1757. overflow-y: hidden;
  1758. }
  1759. }
  1760. .column-header__collapsible-inner {
  1761. background: lighten($ui-base-color, 8%);
  1762. padding: 15px;
  1763. }
  1764. .column-header__setting-btn {
  1765. &:hover {
  1766. color: lighten($ui-primary-color, 4%);
  1767. text-decoration: underline;
  1768. }
  1769. }
  1770. .column-header__setting-arrows {
  1771. float: right;
  1772. .column-header__setting-btn {
  1773. padding: 0 10px;
  1774. &:last-child {
  1775. padding-right: 0;
  1776. }
  1777. }
  1778. }
  1779. .text-btn {
  1780. display: inline-block;
  1781. padding: 0;
  1782. font-family: inherit;
  1783. font-size: inherit;
  1784. color: inherit;
  1785. border: 0;
  1786. background: transparent;
  1787. cursor: pointer;
  1788. }
  1789. .column-header__icon {
  1790. display: inline-block;
  1791. margin-right: 5px;
  1792. }
  1793. .loading-indicator {
  1794. color: $ui-secondary-color;
  1795. font-size: 16px;
  1796. font-weight: 500;
  1797. padding-top: 120px;
  1798. text-align: center;
  1799. }
  1800. .video-error-cover {
  1801. align-items: center;
  1802. background: $base-overlay-background;
  1803. color: $primary-text-color;
  1804. cursor: pointer;
  1805. display: flex;
  1806. flex-direction: column;
  1807. height: 100%;
  1808. justify-content: center;
  1809. margin-top: 8px;
  1810. position: relative;
  1811. text-align: center;
  1812. z-index: 100;
  1813. }
  1814. .media-spoiler {
  1815. align-items: center;
  1816. background: $base-overlay-background;
  1817. color: $primary-text-color;
  1818. cursor: pointer;
  1819. display: flex;
  1820. flex-direction: column;
  1821. height: 100%;
  1822. justify-content: center;
  1823. position: relative;
  1824. text-align: center;
  1825. z-index: 100;
  1826. }
  1827. .media-spoiler__warning {
  1828. display: block;
  1829. font-size: 14px;
  1830. }
  1831. .media-spoiler__trigger {
  1832. display: block;
  1833. font-size: 11px;
  1834. font-weight: 500;
  1835. }
  1836. .spoiler-button {
  1837. display: none;
  1838. left: 4px;
  1839. position: absolute;
  1840. text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
  1841. top: 4px;
  1842. z-index: 100;
  1843. &.spoiler-button--visible {
  1844. display: block;
  1845. }
  1846. }
  1847. .modal-container--preloader {
  1848. background: lighten($ui-base-color, 8%);
  1849. }
  1850. .account--panel {
  1851. background: lighten($ui-base-color, 4%);
  1852. border-top: 1px solid lighten($ui-base-color, 8%);
  1853. border-bottom: 1px solid lighten($ui-base-color, 8%);
  1854. display: flex;
  1855. flex-direction: row;
  1856. padding: 10px 0;
  1857. }
  1858. .account--panel__button,
  1859. .detailed-status__button {
  1860. flex: 1 1 auto;
  1861. text-align: center;
  1862. }
  1863. .column-settings__outer {
  1864. background: lighten($ui-base-color, 8%);
  1865. padding: 15px;
  1866. }
  1867. .column-settings__section {
  1868. color: $ui-primary-color;
  1869. cursor: default;
  1870. display: block;
  1871. font-weight: 500;
  1872. margin-bottom: 10px;
  1873. }
  1874. .column-settings__row {
  1875. .text-btn {
  1876. margin-bottom: 15px;
  1877. }
  1878. }
  1879. .modal-container__nav {
  1880. align-items: center;
  1881. background: rgba($base-overlay-background, 0.5);
  1882. box-sizing: border-box;
  1883. color: $primary-text-color;
  1884. cursor: pointer;
  1885. display: flex;
  1886. font-size: 24px;
  1887. height: 100%;
  1888. padding: 30px 15px;
  1889. position: absolute;
  1890. top: 0;
  1891. }
  1892. .modal-container__nav--left {
  1893. left: -61px;
  1894. }
  1895. .modal-container__nav--right {
  1896. right: -61px;
  1897. }
  1898. .account--follows-info {
  1899. color: $primary-text-color;
  1900. position: absolute;
  1901. top: 10px;
  1902. right: 10px;
  1903. opacity: 0.7;
  1904. display: inline-block;
  1905. vertical-align: top;
  1906. background-color: rgba($base-overlay-background, 0.4);
  1907. text-transform: uppercase;
  1908. font-size: 11px;
  1909. font-weight: 500;
  1910. padding: 4px;
  1911. border-radius: 4px;
  1912. }
  1913. .account--action-button {
  1914. position: absolute;
  1915. top: 10px;
  1916. left: 20px;
  1917. }
  1918. .setting-toggle {
  1919. display: block;
  1920. line-height: 24px;
  1921. }
  1922. .setting-toggle__label {
  1923. color: $ui-primary-color;
  1924. display: inline-block;
  1925. margin-bottom: 14px;
  1926. margin-left: 8px;
  1927. vertical-align: middle;
  1928. }
  1929. .report.scrollable {
  1930. box-sizing: border-box;
  1931. display: flex;
  1932. flex-direction: column;
  1933. max-height: 100%;
  1934. }
  1935. .report__target {
  1936. border-bottom: 1px solid lighten($ui-base-color, 4%);
  1937. color: $ui-secondary-color;
  1938. flex: 0 0 auto;
  1939. padding: 10px;
  1940. strong {
  1941. display: block;
  1942. color: $primary-text-color;
  1943. font-weight: 500;
  1944. }
  1945. }
  1946. .report__statuses {
  1947. flex: 1 1 auto;
  1948. }
  1949. .report__textarea-wrapper {
  1950. flex: 0 0 100px;
  1951. padding: 10px;
  1952. }
  1953. .report__textarea {
  1954. background: transparent;
  1955. box-sizing: border-box;
  1956. border: 0;
  1957. border-bottom: 2px solid $ui-primary-color;
  1958. border-radius: 2px 2px 0 0;
  1959. color: $primary-text-color;
  1960. display: block;
  1961. font-family: inherit;
  1962. font-size: 14px;
  1963. margin-bottom: 10px;
  1964. outline: 0;
  1965. padding: 7px 4px;
  1966. resize: vertical;
  1967. width: 100%;
  1968. &:active,
  1969. &:focus {
  1970. border-bottom-color: $ui-highlight-color;
  1971. background: rgba($base-overlay-background, 0.1);
  1972. }
  1973. }
  1974. .report__submit {
  1975. margin-top: 10px;
  1976. overflow: hidden;
  1977. }
  1978. .report__submit-button {
  1979. float: right;
  1980. }
  1981. .empty-column-indicator {
  1982. color: lighten($ui-base-color, 20%);
  1983. background: $ui-base-color;
  1984. text-align: center;
  1985. padding: 20px;
  1986. font-size: 15px;
  1987. font-weight: 400;
  1988. cursor: default;
  1989. display: flex;
  1990. flex: 1 1 auto;
  1991. align-items: center;
  1992. justify-content: center;
  1993. @supports(display: grid) { // hack to fix Chrome <57
  1994. contain: strict;
  1995. }
  1996. a {
  1997. color: $ui-highlight-color;
  1998. text-decoration: none;
  1999. &:hover {
  2000. text-decoration: underline;
  2001. }
  2002. }
  2003. }
  2004. @keyframes pulse {
  2005. 0% {
  2006. opacity: 1;
  2007. }
  2008. 100% {
  2009. opacity: 0.5;
  2010. }
  2011. }
  2012. .pulse-loading {
  2013. animation: pulse 1s ease-in-out infinite;
  2014. animation-direction: alternate;
  2015. }
  2016. .emoji-dialog {
  2017. width: 245px;
  2018. height: 270px;
  2019. background: $simple-background-color;
  2020. box-sizing: border-box;
  2021. border-radius: 4px;
  2022. overflow: hidden;
  2023. position: relative;
  2024. box-shadow: 0 0 8px rgba($base-shadow-color, 0.2);
  2025. .emojione {
  2026. margin: 0;
  2027. width: 100%;
  2028. height: auto;
  2029. }
  2030. .emoji-dialog-header {
  2031. padding: 0 10px;
  2032. ul {
  2033. padding: 0;
  2034. margin: 0;
  2035. list-style: none;
  2036. }
  2037. li {
  2038. display: inline-block;
  2039. box-sizing: border-box;
  2040. padding: 10px 5px;
  2041. cursor: pointer;
  2042. border-bottom: 2px solid transparent;
  2043. .emoji {
  2044. width: 18px;
  2045. height: 18px;
  2046. }
  2047. img,
  2048. svg {
  2049. width: 18px;
  2050. height: 18px;
  2051. filter: grayscale(100%);
  2052. }
  2053. &:hover {
  2054. img,
  2055. svg {
  2056. filter: grayscale(0);
  2057. }
  2058. }
  2059. &.active {
  2060. border-bottom-color: $ui-highlight-color;
  2061. img,
  2062. svg {
  2063. filter: grayscale(0);
  2064. }
  2065. }
  2066. }
  2067. }
  2068. .emoji-row {
  2069. box-sizing: border-box;
  2070. overflow-y: hidden;
  2071. padding-left: 10px;
  2072. .emoji {
  2073. display: inline-block;
  2074. padding: 2.5px;
  2075. border-radius: 4px;
  2076. }
  2077. }
  2078. .emoji-category-header {
  2079. box-sizing: border-box;
  2080. overflow-y: hidden;
  2081. padding: 10px 8px 10px 16px;
  2082. display: table;
  2083. > * {
  2084. display: table-cell;
  2085. vertical-align: middle;
  2086. }
  2087. }
  2088. .emoji-category-title {
  2089. font-size: 12px;
  2090. text-transform: uppercase;
  2091. font-weight: 500;
  2092. color: darken($ui-secondary-color, 18%);
  2093. cursor: default;
  2094. }
  2095. .emoji-category-heading-decoration {
  2096. text-align: right;
  2097. }
  2098. .modifiers {
  2099. list-style: none;
  2100. padding: 0;
  2101. margin: 0;
  2102. vertical-align: middle;
  2103. white-space: nowrap;
  2104. margin-top: 4px;
  2105. li {
  2106. display: inline-block;
  2107. padding: 0 2px;
  2108. &:last-of-type {
  2109. padding-right: 0;
  2110. }
  2111. }
  2112. .modifier {
  2113. display: inline-block;
  2114. border-radius: 10px;
  2115. width: 15px;
  2116. height: 15px;
  2117. position: relative;
  2118. cursor: pointer;
  2119. &.active::after {
  2120. content: "";
  2121. display: block;
  2122. position: absolute;
  2123. width: 7px;
  2124. height: 7px;
  2125. border-radius: 10px;
  2126. border: 2px solid $base-border-color;
  2127. top: 2px;
  2128. left: 2px;
  2129. }
  2130. }
  2131. }
  2132. .emoji-search-wrapper {
  2133. padding: 10px;
  2134. border-bottom: 1px solid lighten($ui-secondary-color, 4%);
  2135. }
  2136. .emoji-search {
  2137. font-size: 14px;
  2138. font-weight: 400;
  2139. padding: 7px 9px;
  2140. font-family: inherit;
  2141. display: block;
  2142. width: 100%;
  2143. background: rgba($ui-secondary-color, 0.3);
  2144. color: darken($ui-secondary-color, 18%);
  2145. border: 1px solid $ui-secondary-color;
  2146. border-radius: 4px;
  2147. }
  2148. .emoji-categories-wrapper {
  2149. position: absolute;
  2150. top: 42px;
  2151. bottom: 0;
  2152. left: 0;
  2153. right: 0;
  2154. }
  2155. .emoji-search-wrapper + .emoji-categories-wrapper {
  2156. top: 93px;
  2157. }
  2158. .emoji-row .emoji {
  2159. img,
  2160. svg {
  2161. transition: transform 60ms ease-in-out;
  2162. }
  2163. &:hover {
  2164. background: lighten($ui-secondary-color, 3%);
  2165. img,
  2166. svg {
  2167. transform: translateZ(0) scale(1.2);
  2168. }
  2169. }
  2170. }
  2171. .emoji {
  2172. width: 22px;
  2173. height: 22px;
  2174. cursor: pointer;
  2175. &:focus {
  2176. outline: 0;
  2177. }
  2178. }
  2179. }
  2180. .upload-area {
  2181. align-items: center;
  2182. background: rgba($base-overlay-background, 0.8);
  2183. display: flex;
  2184. height: 100%;
  2185. justify-content: center;
  2186. left: 0;
  2187. opacity: 0;
  2188. position: absolute;
  2189. top: 0;
  2190. visibility: hidden;
  2191. width: 100%;
  2192. z-index: 2000;
  2193. * {
  2194. pointer-events: none;
  2195. }
  2196. }
  2197. .upload-area__drop {
  2198. width: 320px;
  2199. height: 160px;
  2200. display: flex;
  2201. box-sizing: border-box;
  2202. position: relative;
  2203. padding: 8px;
  2204. }
  2205. .upload-area__background {
  2206. position: absolute;
  2207. top: 0;
  2208. right: 0;
  2209. bottom: 0;
  2210. left: 0;
  2211. z-index: -1;
  2212. border-radius: 4px;
  2213. background: $ui-base-color;
  2214. box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
  2215. }
  2216. .upload-area__content {
  2217. flex: 1;
  2218. display: flex;
  2219. align-items: center;
  2220. justify-content: center;
  2221. color: $ui-secondary-color;
  2222. font-size: 18px;
  2223. font-weight: 500;
  2224. border: 2px dashed lighten($ui-base-color, 26%);
  2225. border-radius: 4px;
  2226. }
  2227. .upload-progress {
  2228. padding: 10px;
  2229. color: lighten($ui-base-color, 26%);
  2230. overflow: hidden;
  2231. display: flex;
  2232. .fa {
  2233. font-size: 34px;
  2234. margin-right: 10px;
  2235. }
  2236. span {
  2237. font-size: 12px;
  2238. text-transform: uppercase;
  2239. font-weight: 500;
  2240. display: block;
  2241. }
  2242. }
  2243. .upload-progess__message {
  2244. flex: 1 1 auto;
  2245. }
  2246. .upload-progress__backdrop {
  2247. width: 100%;
  2248. height: 6px;
  2249. border-radius: 6px;
  2250. background: lighten($ui-base-color, 26%);
  2251. position: relative;
  2252. margin-top: 5px;
  2253. }
  2254. .upload-progress__tracker {
  2255. position: absolute;
  2256. left: 0;
  2257. top: 0;
  2258. height: 6px;
  2259. background: $ui-highlight-color;
  2260. border-radius: 6px;
  2261. }
  2262. .emoji-button {
  2263. display: block;
  2264. font-size: 24px;
  2265. line-height: 24px;
  2266. margin-left: 2px;
  2267. width: 24px;
  2268. outline: 0;
  2269. &:active,
  2270. &:focus {
  2271. outline: 0 !important;
  2272. }
  2273. img {
  2274. filter: grayscale(100%);
  2275. opacity: 0.8;
  2276. display: block;
  2277. margin: 0;
  2278. width: 22px;
  2279. height: 22px;
  2280. margin-top: 2px;
  2281. }
  2282. &:hover,
  2283. &:active,
  2284. &:focus {
  2285. img {
  2286. opacity: 1;
  2287. filter: none;
  2288. }
  2289. }
  2290. }
  2291. .dropdown--active .emoji-button img {
  2292. opacity: 1;
  2293. filter: none;
  2294. }
  2295. .privacy-dropdown {
  2296. position: relative;
  2297. }
  2298. .privacy-dropdown__dropdown {
  2299. display: none;
  2300. position: absolute;
  2301. left: 0;
  2302. top: 27px;
  2303. width: 230px;
  2304. background: $simple-background-color;
  2305. border-radius: 0 4px 4px;
  2306. z-index: 2;
  2307. overflow: hidden;
  2308. }
  2309. .privacy-dropdown__option {
  2310. color: $ui-base-color;
  2311. padding: 10px;
  2312. cursor: pointer;
  2313. display: flex;
  2314. &:hover,
  2315. &.active {
  2316. background: $ui-highlight-color;
  2317. color: $primary-text-color;
  2318. .privacy-dropdown__option__content {
  2319. color: $primary-text-color;
  2320. strong {
  2321. color: $primary-text-color;
  2322. }
  2323. }
  2324. }
  2325. &.active:hover {
  2326. background: lighten($ui-highlight-color, 4%);
  2327. }
  2328. }
  2329. .privacy-dropdown__option__icon {
  2330. display: flex;
  2331. align-items: center;
  2332. justify-content: center;
  2333. margin-right: 10px;
  2334. }
  2335. .privacy-dropdown__option__content {
  2336. flex: 1 1 auto;
  2337. color: darken($ui-primary-color, 24%);
  2338. strong {
  2339. font-weight: 500;
  2340. display: block;
  2341. color: $ui-base-color;
  2342. }
  2343. }
  2344. .privacy-dropdown.active {
  2345. .privacy-dropdown__value {
  2346. background: $simple-background-color;
  2347. border-radius: 4px 4px 0 0;
  2348. box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
  2349. }
  2350. .privacy-dropdown__dropdown {
  2351. display: block;
  2352. box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
  2353. }
  2354. }
  2355. .search {
  2356. position: relative;
  2357. }
  2358. .search__input {
  2359. padding-right: 30px;
  2360. color: $ui-secondary-color;
  2361. outline: 0;
  2362. box-sizing: border-box;
  2363. display: block;
  2364. width: 100%;
  2365. border: none;
  2366. padding: 10px;
  2367. padding-right: 30px;
  2368. font-family: inherit;
  2369. background: $ui-base-color;
  2370. color: $ui-primary-color;
  2371. font-size: 14px;
  2372. margin: 0;
  2373. &::-moz-focus-inner {
  2374. border: 0;
  2375. }
  2376. &::-moz-focus-inner,
  2377. &:focus,
  2378. &:active {
  2379. outline: 0 !important;
  2380. }
  2381. &:focus {
  2382. background: lighten($ui-base-color, 4%);
  2383. }
  2384. @media screen and (max-width: 600px) {
  2385. font-size: 16px;
  2386. }
  2387. }
  2388. .search__icon {
  2389. .fa {
  2390. position: absolute;
  2391. top: 10px;
  2392. right: 10px;
  2393. z-index: 2;
  2394. display: inline-block;
  2395. opacity: 0;
  2396. transition: all 100ms linear;
  2397. font-size: 18px;
  2398. width: 18px;
  2399. height: 18px;
  2400. color: $ui-secondary-color;
  2401. cursor: default;
  2402. pointer-events: none;
  2403. &.active {
  2404. pointer-events: auto;
  2405. opacity: 0.3;
  2406. }
  2407. }
  2408. .fa-search {
  2409. transform: translateZ(0) rotate(90deg);
  2410. &.active {
  2411. pointer-events: none;
  2412. transform: translateZ(0) rotate(0deg);
  2413. }
  2414. }
  2415. .fa-times-circle {
  2416. top: 11px;
  2417. transform: translateZ(0) rotate(0deg);
  2418. cursor: pointer;
  2419. &.active {
  2420. transform: translateZ(0) rotate(90deg);
  2421. }
  2422. &:hover {
  2423. color: $primary-text-color;
  2424. }
  2425. }
  2426. }
  2427. .search-results__header {
  2428. color: lighten($ui-base-color, 26%);
  2429. background: lighten($ui-base-color, 2%);
  2430. border-bottom: 1px solid darken($ui-base-color, 4%);
  2431. padding: 15px 10px;
  2432. font-size: 14px;
  2433. font-weight: 500;
  2434. }
  2435. .search-results__hashtag {
  2436. display: block;
  2437. padding: 10px;
  2438. color: $ui-secondary-color;
  2439. text-decoration: none;
  2440. &:hover,
  2441. &:active,
  2442. &:focus {
  2443. color: lighten($ui-secondary-color, 4%);
  2444. text-decoration: underline;
  2445. }
  2446. }
  2447. .modal-root__overlay {
  2448. position: absolute;
  2449. top: 0;
  2450. left: 0;
  2451. right: 0;
  2452. bottom: 0;
  2453. z-index: 9999;
  2454. opacity: 0;
  2455. background: rgba($base-overlay-background, 0.7);
  2456. transform: translateZ(0);
  2457. }
  2458. .modal-root__container {
  2459. position: absolute;
  2460. top: 0;
  2461. left: 0;
  2462. width: 100%;
  2463. height: 100%;
  2464. display: flex;
  2465. flex-direction: column;
  2466. align-items: center;
  2467. justify-content: center;
  2468. align-content: space-around;
  2469. z-index: 9999;
  2470. opacity: 0;
  2471. pointer-events: none;
  2472. user-select: none;
  2473. }
  2474. .modal-root__modal {
  2475. pointer-events: auto;
  2476. display: flex;
  2477. z-index: 9999;
  2478. }
  2479. .media-modal {
  2480. max-width: 80vw;
  2481. max-height: 80vh;
  2482. position: relative;
  2483. img,
  2484. canvas,
  2485. video {
  2486. max-width: 80vw;
  2487. max-height: 80vh;
  2488. width: auto;
  2489. height: auto;
  2490. }
  2491. img,
  2492. canvas {
  2493. display: block;
  2494. background: url('../images/void.png') repeat;
  2495. }
  2496. }
  2497. .media-modal__close {
  2498. position: absolute;
  2499. right: 4px;
  2500. top: 4px;
  2501. z-index: 100;
  2502. }
  2503. .onboarding-modal {
  2504. background: $ui-secondary-color;
  2505. color: $ui-base-color;
  2506. border-radius: 8px;
  2507. overflow: hidden;
  2508. display: flex;
  2509. flex-direction: column;
  2510. }
  2511. .onboarding-modal__pager {
  2512. height: 80vh;
  2513. width: 80vw;
  2514. max-width: 520px;
  2515. max-height: 420px;
  2516. position: relative;
  2517. & > div {
  2518. position: absolute;
  2519. top: 0;
  2520. left: 0;
  2521. width: 100%;
  2522. height: 100%;
  2523. box-sizing: border-box;
  2524. padding: 25px;
  2525. display: none;
  2526. flex-direction: column;
  2527. align-items: center;
  2528. justify-content: center;
  2529. display: flex;
  2530. opacity: 0;
  2531. user-select: text;
  2532. }
  2533. }
  2534. @media screen and (max-width: 550px) {
  2535. .onboarding-modal {
  2536. width: 100%;
  2537. height: 100%;
  2538. border-radius: 0;
  2539. }
  2540. .onboarding-modal__pager {
  2541. width: 100%;
  2542. height: auto;
  2543. max-width: none;
  2544. max-height: none;
  2545. flex: 1 1 auto;
  2546. }
  2547. }
  2548. .onboarding-modal__paginator {
  2549. flex: 0 0 auto;
  2550. background: darken($ui-secondary-color, 8%);
  2551. display: flex;
  2552. padding: 25px;
  2553. & > div {
  2554. min-width: 33px;
  2555. }
  2556. .onboarding-modal__nav {
  2557. color: darken($ui-secondary-color, 34%);
  2558. background-color: transparent;
  2559. border: 0;
  2560. font-size: 14px;
  2561. font-weight: 500;
  2562. padding: 0;
  2563. line-height: inherit;
  2564. height: auto;
  2565. &:hover,
  2566. &:focus,
  2567. &:active {
  2568. color: darken($ui-secondary-color, 38%);
  2569. }
  2570. &.onboarding-modal__done,
  2571. &.onboarding-modal__next {
  2572. color: $ui-highlight-color;
  2573. }
  2574. }
  2575. }
  2576. .onboarding-modal__dots {
  2577. flex: 1 1 auto;
  2578. display: flex;
  2579. align-items: center;
  2580. justify-content: center;
  2581. }
  2582. .onboarding-modal__dot {
  2583. width: 14px;
  2584. height: 14px;
  2585. border-radius: 14px;
  2586. background: darken($ui-secondary-color, 16%);
  2587. margin: 0 3px;
  2588. cursor: pointer;
  2589. &:hover {
  2590. background: darken($ui-secondary-color, 18%);
  2591. }
  2592. &.active {
  2593. cursor: default;
  2594. background: darken($ui-secondary-color, 24%);
  2595. }
  2596. }
  2597. .onboarding-modal__page__wrapper {
  2598. pointer-events: none;
  2599. &.onboarding-modal__page__wrapper--active {
  2600. pointer-events: auto;
  2601. }
  2602. }
  2603. .onboarding-modal__page {
  2604. cursor: default;
  2605. line-height: 21px;
  2606. h1 {
  2607. font-size: 18px;
  2608. font-weight: 500;
  2609. color: $ui-base-color;
  2610. margin-bottom: 20px;
  2611. }
  2612. a {
  2613. color: $ui-highlight-color;
  2614. &:hover,
  2615. &:focus,
  2616. &:active {
  2617. color: lighten($ui-highlight-color, 4%);
  2618. }
  2619. }
  2620. p {
  2621. font-size: 16px;
  2622. color: lighten($ui-base-color, 8%);
  2623. margin-top: 10px;
  2624. margin-bottom: 10px;
  2625. &:last-child {
  2626. margin-bottom: 0;
  2627. }
  2628. strong {
  2629. font-weight: 500;
  2630. background: $ui-base-color;
  2631. color: $ui-secondary-color;
  2632. border-radius: 4px;
  2633. font-size: 14px;
  2634. padding: 3px 6px;
  2635. }
  2636. }
  2637. }
  2638. .onboarding-modal__page-one {
  2639. display: flex;
  2640. align-items: center;
  2641. }
  2642. .onboarding-modal__page-one__elephant-friend {
  2643. background: url('../images/elephant-friend-1.png') no-repeat center center / contain;
  2644. width: 155px;
  2645. height: 193px;
  2646. margin-right: 15px;
  2647. }
  2648. @media screen and (max-width: 400px) {
  2649. .onboarding-modal__page-one {
  2650. flex-direction: column;
  2651. align-items: normal;
  2652. }
  2653. .onboarding-modal__page-one__elephant-friend {
  2654. width: 100%;
  2655. height: 30vh;
  2656. max-height: 160px;
  2657. margin-bottom: 5vh;
  2658. }
  2659. }
  2660. .onboarding-modal__page-two,
  2661. .onboarding-modal__page-three,
  2662. .onboarding-modal__page-four,
  2663. .onboarding-modal__page-five {
  2664. p {
  2665. text-align: left;
  2666. }
  2667. .figure {
  2668. background: darken($ui-base-color, 8%);
  2669. color: $ui-secondary-color;
  2670. margin-bottom: 20px;
  2671. border-radius: 4px;
  2672. padding: 10px;
  2673. text-align: center;
  2674. font-size: 14px;
  2675. box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3);
  2676. .onboarding-modal__image {
  2677. border-radius: 4px;
  2678. margin-bottom: 10px;
  2679. }
  2680. &.non-interactive {
  2681. pointer-events: none;
  2682. text-align: left;
  2683. }
  2684. }
  2685. }
  2686. .onboarding-modal__page-four__columns {
  2687. .row {
  2688. display: flex;
  2689. margin-bottom: 20px;
  2690. & > div {
  2691. flex: 1 1 0;
  2692. margin: 0 10px;
  2693. &:first-child {
  2694. margin-left: 0;
  2695. }
  2696. &:last-child {
  2697. margin-right: 0;
  2698. }
  2699. p {
  2700. text-align: center;
  2701. }
  2702. }
  2703. &:last-child {
  2704. margin-bottom: 0;
  2705. }
  2706. }
  2707. .column-header {
  2708. color: $primary-text-color;
  2709. }
  2710. }
  2711. @media screen and (max-width: 320px) and (max-height: 600px) {
  2712. .onboarding-modal__page p {
  2713. font-size: 14px;
  2714. line-height: 20px;
  2715. }
  2716. .onboarding-modal__page-two .figure,
  2717. .onboarding-modal__page-three .figure,
  2718. .onboarding-modal__page-four .figure,
  2719. .onboarding-modal__page-five .figure {
  2720. font-size: 12px;
  2721. margin-bottom: 10px;
  2722. }
  2723. .onboarding-modal__page-four__columns .row {
  2724. margin-bottom: 10px;
  2725. }
  2726. .onboarding-modal__page-four__columns .column-header {
  2727. padding: 5px;
  2728. font-size: 12px;
  2729. }
  2730. }
  2731. .onboarding-modal__image {
  2732. border-radius: 8px;
  2733. width: 70vw;
  2734. max-width: 450px;
  2735. max-height: auto;
  2736. display: block;
  2737. margin: auto;
  2738. margin-bottom: 20px;
  2739. }
  2740. .onboard-sliders {
  2741. display: inline-block;
  2742. max-width: 30px;
  2743. max-height: auto;
  2744. margin-left: 10px;
  2745. }
  2746. .boost-modal,
  2747. .confirmation-modal {
  2748. background: lighten($ui-secondary-color, 8%);
  2749. color: $ui-base-color;
  2750. border-radius: 8px;
  2751. overflow: hidden;
  2752. max-width: 90vw;
  2753. width: 480px;
  2754. position: relative;
  2755. flex-direction: column;
  2756. .status__display-name {
  2757. display: block;
  2758. max-width: 100%;
  2759. padding-right: 25px;
  2760. }
  2761. .status__avatar {
  2762. height: 28px;
  2763. left: 10px;
  2764. position: absolute;
  2765. top: 10px;
  2766. width: 48px;
  2767. }
  2768. }
  2769. .boost-modal__container {
  2770. overflow-x: scroll;
  2771. padding: 10px;
  2772. .status {
  2773. user-select: text;
  2774. border-bottom: 0;
  2775. }
  2776. }
  2777. .boost-modal__action-bar,
  2778. .confirmation-modal__action-bar {
  2779. display: flex;
  2780. justify-content: space-between;
  2781. background: $ui-secondary-color;
  2782. padding: 10px;
  2783. line-height: 36px;
  2784. & > div {
  2785. flex: 1 1 auto;
  2786. text-align: right;
  2787. color: lighten($ui-base-color, 33%);
  2788. padding-right: 10px;
  2789. }
  2790. .button {
  2791. flex: 0 0 auto;
  2792. }
  2793. }
  2794. .boost-modal__status-header {
  2795. font-size: 15px;
  2796. }
  2797. .boost-modal__status-time {
  2798. float: right;
  2799. font-size: 14px;
  2800. }
  2801. .confirmation-modal {
  2802. max-width: 280px;
  2803. @media screen and (min-width: 480px) {
  2804. max-width: 380px;
  2805. }
  2806. }
  2807. .confirmation-modal__action-bar {
  2808. .confirmation-modal__cancel-button {
  2809. background-color: transparent;
  2810. color: darken($ui-secondary-color, 34%);
  2811. font-size: 14px;
  2812. font-weight: 500;
  2813. &:hover,
  2814. &:focus,
  2815. &:active {
  2816. color: darken($ui-secondary-color, 38%);
  2817. }
  2818. }
  2819. }
  2820. .confirmation-modal__container {
  2821. padding: 30px;
  2822. font-size: 16px;
  2823. text-align: center;
  2824. strong {
  2825. font-weight: 500;
  2826. }
  2827. }
  2828. .loading-bar {
  2829. background-color: $ui-highlight-color;
  2830. height: 3px;
  2831. position: absolute;
  2832. top: 0;
  2833. left: 0;
  2834. }
  2835. .media-gallery__gifv__label {
  2836. display: block;
  2837. position: absolute;
  2838. color: $primary-text-color;
  2839. background: rgba($base-overlay-background, 0.5);
  2840. bottom: 6px;
  2841. left: 6px;
  2842. padding: 2px 6px;
  2843. border-radius: 2px;
  2844. font-size: 11px;
  2845. font-weight: 600;
  2846. z-index: 1;
  2847. pointer-events: none;
  2848. opacity: 0.9;
  2849. transition: opacity 0.1s ease;
  2850. }
  2851. .media-gallery__gifv {
  2852. &.autoplay {
  2853. .media-gallery__gifv__label {
  2854. display: none;
  2855. }
  2856. }
  2857. &:hover {
  2858. .media-gallery__gifv__label {
  2859. opacity: 1;
  2860. }
  2861. }
  2862. }
  2863. .attachment-list {
  2864. display: flex;
  2865. font-size: 14px;
  2866. border: 1px solid lighten($ui-base-color, 8%);
  2867. border-radius: 4px;
  2868. margin-top: 14px;
  2869. overflow: hidden;
  2870. }
  2871. .attachment-list__icon {
  2872. flex: 0 0 auto;
  2873. color: lighten($ui-base-color, 26%);
  2874. padding: 8px 18px;
  2875. cursor: default;
  2876. border-right: 1px solid lighten($ui-base-color, 8%);
  2877. display: flex;
  2878. flex-direction: column;
  2879. align-items: center;
  2880. justify-content: center;
  2881. font-size: 26px;
  2882. .fa {
  2883. display: block;
  2884. }
  2885. }
  2886. .attachment-list__list {
  2887. list-style: none;
  2888. padding: 4px 0;
  2889. padding-left: 8px;
  2890. display: flex;
  2891. flex-direction: column;
  2892. justify-content: center;
  2893. li {
  2894. display: block;
  2895. padding: 4px 0;
  2896. }
  2897. a {
  2898. text-decoration: none;
  2899. color: lighten($ui-base-color, 26%);
  2900. font-weight: 500;
  2901. &:hover {
  2902. text-decoration: underline;
  2903. }
  2904. }
  2905. }
  2906. /* Media Gallery */
  2907. .media-gallery {
  2908. box-sizing: border-box;
  2909. margin-top: 8px;
  2910. overflow: hidden;
  2911. position: relative;
  2912. width: 100%;
  2913. }
  2914. .media-gallery__item {
  2915. border: none;
  2916. box-sizing: border-box;
  2917. display: block;
  2918. float: left;
  2919. position: relative;
  2920. }
  2921. .media-gallery__item-thumbnail {
  2922. background-position: center;
  2923. background-repeat: no-repeat;
  2924. background-size: cover;
  2925. cursor: zoom-in;
  2926. display: flex;
  2927. align-items: center;
  2928. text-decoration: none;
  2929. height: 100%;
  2930. &,
  2931. img {
  2932. width: 100%;
  2933. }
  2934. }
  2935. .media-gallery__gifv {
  2936. height: 100%;
  2937. overflow: hidden;
  2938. position: relative;
  2939. width: 100%;
  2940. }
  2941. .media-gallery__item-gifv-thumbnail {
  2942. cursor: zoom-in;
  2943. height: 100%;
  2944. object-fit: cover;
  2945. position: relative;
  2946. top: 50%;
  2947. transform: translateY(-50%);
  2948. width: 100%;
  2949. z-index: 1;
  2950. }
  2951. .media-gallery__item-thumbnail-label {
  2952. clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  2953. clip: rect(1px, 1px, 1px, 1px);
  2954. overflow: hidden;
  2955. position: absolute;
  2956. }
  2957. /* End Media Gallery */
  2958. /* Status Video Player */
  2959. .status__video-player {
  2960. background: $base-overlay-background;
  2961. box-sizing: border-box;
  2962. cursor: default; /* May not be needed */
  2963. margin-top: 8px;
  2964. overflow: hidden;
  2965. position: relative;
  2966. }
  2967. .status__video-player-video {
  2968. height: 100%;
  2969. object-fit: cover;
  2970. position: relative;
  2971. top: 50%;
  2972. transform: translateY(-50%);
  2973. width: 100%;
  2974. z-index: 1;
  2975. }
  2976. .status__video-player-expand,
  2977. .status__video-player-mute {
  2978. color: $primary-text-color;
  2979. opacity: 0.8;
  2980. position: absolute;
  2981. right: 4px;
  2982. text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
  2983. }
  2984. .status__video-player-spoiler {
  2985. display: none;
  2986. color: $primary-text-color;
  2987. left: 4px;
  2988. position: absolute;
  2989. text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
  2990. top: 4px;
  2991. z-index: 100;
  2992. &.status__video-player-spoiler--visible {
  2993. display: block;
  2994. }
  2995. }
  2996. .status__video-player-expand {
  2997. bottom: 4px;
  2998. z-index: 100;
  2999. }
  3000. .status__video-player-mute {
  3001. top: 4px;
  3002. z-index: 5;
  3003. }
  3004. .media-spoiler-video {
  3005. background-size: cover;
  3006. background-repeat: no-repeat;
  3007. background-position: center;
  3008. cursor: pointer;
  3009. margin-top: 8px;
  3010. position: relative;
  3011. }
  3012. .media-spoiler-video-play-icon {
  3013. border-radius: 100px;
  3014. color: rgba($primary-text-color, 0.8);
  3015. font-size: 36px;
  3016. left: 50%;
  3017. padding: 5px;
  3018. position: absolute;
  3019. top: 50%;
  3020. transform: translate(-50%, -50%);
  3021. }
  3022. /* End Video Player */
  3023. .account-gallery__container {
  3024. margin: -2px;
  3025. padding: 4px;
  3026. }
  3027. .account-gallery__item {
  3028. float: left;
  3029. width: 96px;
  3030. height: 96px;
  3031. margin: 2px;
  3032. a {
  3033. display: block;
  3034. width: 100%;
  3035. height: 100%;
  3036. background-color: $base-overlay-background;
  3037. background-size: cover;
  3038. background-position: center;
  3039. position: relative;
  3040. }
  3041. }
  3042. .account-section-headline {
  3043. color: lighten($ui-base-color, 26%);
  3044. background: lighten($ui-base-color, 2%);
  3045. border-bottom: 1px solid lighten($ui-base-color, 4%);
  3046. padding: 15px 10px;
  3047. font-size: 14px;
  3048. font-weight: 500;
  3049. position: relative;
  3050. cursor: default;
  3051. &::before,
  3052. &::after {
  3053. display: block;
  3054. content: "";
  3055. position: absolute;
  3056. bottom: 0;
  3057. left: 18px;
  3058. width: 0;
  3059. height: 0;
  3060. border-style: solid;
  3061. border-width: 0 10px 10px;
  3062. border-color: transparent transparent lighten($ui-base-color, 4%);
  3063. }
  3064. &::after {
  3065. bottom: -1px;
  3066. border-color: transparent transparent $ui-base-color;
  3067. }
  3068. }
  3069. noscript {
  3070. text-align: center;
  3071. div {
  3072. font-size: 20px;
  3073. margin: 20px 0;
  3074. }
  3075. }