The Cybre.Space fork of Mastodon -- https://github.com/tootsuite/mastodon https://cybre.space
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.

cybre-base.scss 1.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. @import 'application';
  2. /* Allow columns to grow wider as the screen gets
  3. * wider, but don't ever let them get more than
  4. * 400px (some people have a bunch of columns!) */
  5. @media screen and (min-width: 1300px) {
  6. .column {
  7. flex-grow: 1 !important;
  8. max-width: 400px;
  9. }
  10. .drawer {
  11. width: 17%; /* Not part of the flex fun */
  12. max-width: 400px;
  13. min-width: 330px;
  14. }
  15. }
  16. /* Cap the column height at 100vh (fixed an old
  17. * bug someone encountered in safari, but which
  18. * I've seen resurface from time to time) */
  19. .column {
  20. max-height:100vh;
  21. }
  22. /* Don't show outline around statuses if we're in
  23. * mouse or touch mode (rather than keyboard) */
  24. [data-whatinput="mouse"], [data-whatinput="touch"] {
  25. .status__content:focus, .status:focus,
  26. .status__wrapper:focus, .status__content__text:focus {
  27. outline: none;
  28. }
  29. }
  30. /* Less emphatic show more */
  31. .status__content__read-more-button {
  32. font-size: 14px;
  33. color: $dark-text-color;
  34. .status__prepend-icon {
  35. padding-right: 4px;
  36. }
  37. }
  38. /* Show a little arrowey thing after the time in a
  39. * status to signal that you can click it to see
  40. * a detailed view */
  41. .status time:after,
  42. .detailed-status__datetime span:after {
  43. font: normal normal normal 14px/1 FontAwesome;
  44. content: "\00a0\00a0\f08e";
  45. }
  46. /* Don't display the elephant mascot (we have our
  47. * own, thanks) */
  48. .drawer__inner__mastodon {
  49. display: none;
  50. }
  51. /* Let the compose area/drawer be short, but
  52. * expand if necessary */
  53. .drawer .drawer__inner {
  54. overflow: visible;
  55. height:inherit;
  56. background-image: none;
  57. }
  58. .drawer__pager {
  59. overflow-y:auto;
  60. }
  61. /* Use display: none instead of visibility:hidden
  62. * to hide the suggested follows list on non-mobile */
  63. @media screen and (min-width: 630px) {
  64. .search-results .trends {
  65. display:none;
  66. }
  67. }
  68. @import 'fullwidth-media';