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.

122 lines
2.5 KiB

  1. body {
  2. font-family: 'mastodon-font-sans-serif', sans-serif;
  3. background: $ui-base-color;
  4. background-size: cover;
  5. background-attachment: fixed;
  6. font-size: 13px;
  7. line-height: 18px;
  8. font-weight: 400;
  9. color: $primary-text-color;
  10. padding-bottom: 20px;
  11. text-rendering: optimizelegibility;
  12. font-feature-settings: "kern";
  13. text-size-adjust: none;
  14. -webkit-tap-highlight-color: rgba(0,0,0,0);
  15. -webkit-tap-highlight-color: transparent;
  16. &.system-font {
  17. // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
  18. // -apple-system => Safari <11 specific
  19. // BlinkMacSystemFont => Chrome <56 on macOS specific
  20. // Segoe UI => Windows 7/8/10
  21. // Oxygen => KDE
  22. // Ubuntu => Unity/Ubuntu
  23. // Cantarell => GNOME
  24. // Fira Sans => Firefox OS
  25. // Droid Sans => Older Androids (<4.0)
  26. // Helvetica Neue => Older macOS <10.11
  27. // mastodon-font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
  28. font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", mastodon-font-sans-serif, sans-serif;
  29. }
  30. &.app-body {
  31. position: fixed;
  32. width: 100%;
  33. height: 100%;
  34. padding: 0;
  35. background: $ui-base-color;
  36. }
  37. &.about-body {
  38. background: darken($ui-base-color, 8%);
  39. padding-bottom: 0;
  40. }
  41. &.tag-body {
  42. background: darken($ui-base-color, 8%);
  43. padding-bottom: 0;
  44. }
  45. &.embed {
  46. background: transparent;
  47. margin: 0;
  48. padding-bottom: 0;
  49. .container {
  50. position: absolute;
  51. width: 100%;
  52. height: 100%;
  53. overflow: hidden;
  54. }
  55. }
  56. &.admin {
  57. background: darken($ui-base-color, 4%);
  58. position: fixed;
  59. width: 100%;
  60. height: 100%;
  61. padding: 0;
  62. }
  63. &.error {
  64. position: absolute;
  65. text-align: center;
  66. color: $ui-primary-color;
  67. background: $ui-base-color;
  68. width: 100%;
  69. height: 100%;
  70. padding: 0;
  71. display: flex;
  72. justify-content: center;
  73. align-items: center;
  74. .dialog {
  75. vertical-align: middle;
  76. margin: 20px;
  77. img {
  78. display: block;
  79. max-width: 470px;
  80. width: 100%;
  81. height: auto;
  82. margin-top: -120px;
  83. }
  84. h1 {
  85. font-size: 20px;
  86. line-height: 28px;
  87. font-weight: 400;
  88. }
  89. }
  90. }
  91. }
  92. button {
  93. font-family: inherit;
  94. cursor: pointer;
  95. &:focus {
  96. outline: none;
  97. }
  98. }
  99. .app-holder {
  100. &,
  101. & > div {
  102. display: flex;
  103. width: 100%;
  104. height: 100%;
  105. align-items: center;
  106. justify-content: center;
  107. }
  108. }