app/javascript/styles/mastodon/basics.scss

   1 @function hex-color($color) {
   2   @if type-of($color) == 'color' {
   3     $color: str-slice(ie-hex-str($color), 4);
   4   }
   5
   6   @return '%23' + unquote($color);
   7 }
   8
   9 body {
  10   font-family: $font-sans-serif, sans-serif;
  11   background: darken($ui-base-color, 7%);
  12   font-size: 13px;
  13   line-height: 18px;
  14   font-weight: 400;
  15   color: $primary-text-color;
  16   text-rendering: optimizelegibility;
  17   font-feature-settings: "kern";
  18   text-size-adjust: none;
  19   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  20   -webkit-tap-highlight-color: transparent;
  21
  22   &.system-font {
  23     // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
  24     // -apple-system => Safari <11 specific
  25     // BlinkMacSystemFont => Chrome <56 on macOS specific
  26     // Segoe UI => Windows 7/8/10
  27     // Oxygen => KDE
  28     // Ubuntu => Unity/Ubuntu
  29     // Cantarell => GNOME
  30     // Fira Sans => Firefox OS
  31     // Droid Sans => Older Androids (<4.0)
  32     // Helvetica Neue => Older macOS <10.11
  33     // $font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
  34     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", $font-sans-serif, sans-serif;
  35   }
  36
  37   &.app-body {
  38     padding: 0;
  39
  40     &.layout-single-column {
  41       height: auto;
  42       min-height: 100vh;
  43       overflow-y: scroll;
  44     }
  45
  46     &.layout-multiple-columns {
  47       position: absolute;
  48       width: 100%;
  49       height: 100%;
  50     }
  51
  52     &.with-modals--active {
  53       overflow-y: hidden;
  54     }
  55   }
  56
  57   &.lighter {
  58     background: $ui-base-color;
  59   }
  60
  61   &.with-modals {
  62     overflow-x: hidden;
  63     overflow-y: scroll;
  64
  65     &--active {
  66       overflow-y: hidden;
  67     }
  68   }
  69
  70   &.player {
  71     text-align: center;
  72   }
  73
  74   &.embed {
  75     background: lighten($ui-base-color, 4%);
  76     margin: 0;
  77     padding-bottom: 0;
  78
  79     .container {
  80       position: absolute;
  81       width: 100%;
  82       height: 100%;
  83       overflow: hidden;
  84     }
  85   }
  86
  87   &.admin {
  88     background: darken($ui-base-color, 4%);
  89     padding: 0;
  90   }
  91
  92   &.error {
  93     position: absolute;
  94     text-align: center;
  95     color: $darker-text-color;
  96     background: $ui-base-color;
  97     width: 100%;
  98     height: 100%;
  99     padding: 0;
 100     display: flex;
 101     justify-content: center;
 102     align-items: center;
 103
 104     .dialog {
 105       vertical-align: middle;
 106       margin: 20px;
 107
 108       &__illustration {
 109         img {
 110           display: block;
 111           max-width: 470px;
 112           width: 100%;
 113           height: auto;
 114           margin-top: -120px;
 115         }
 116       }
 117
 118       h1 {
 119         font-size: 20px;
 120         line-height: 28px;
 121         font-weight: 400;
 122       }
 123     }
 124   }
 125 }
 126
 127 button {
 128   font-family: inherit;
 129   cursor: pointer;
 130
 131   &:focus {
 132     outline: none;
 133   }
 134 }
 135
 136 .app-holder {
 137   &,
 138   & > div {
 139     display: flex;
 140     width: 100%;
 141     align-items: center;
 142     justify-content: center;
 143     outline: 0 !important;
 144   }
 145 }
 146
 147 .layout-single-column .app-holder {
 148   &,
 149   & > div {
 150     min-height: 100vh;
 151   }
 152 }
 153
 154 .layout-multiple-columns .app-holder {
 155   &,
 156   & > div {
 157     height: 100%;
 158   }
 159 }