app/javascript/styles/basics.scss

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