* Adjust account-grid in public profiles Full-width card on mobile UI. Set break-word for long name and ID. Fix margin. * Reduce padding-bottom of public profiles * Revive next prev buttons in mobile public profiles In followers followees pages. * Revert break-word for username * Fix overflow of display_name Need re-setting text-overflow and overflow in display: block;
		
			
				
	
	
		
			94 lines
		
	
	
		
			2.1 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
			
		
		
	
	
			94 lines
		
	
	
		
			2.1 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
body {
 | 
						|
  background: $ui-base-color;
 | 
						|
  background-size: cover;
 | 
						|
  background-attachment: fixed;
 | 
						|
  font-size: 13px;
 | 
						|
  line-height: 18px;
 | 
						|
  font-weight: 400;
 | 
						|
  color: $primary-text-color;
 | 
						|
  padding-bottom: 40px;
 | 
						|
  text-rendering: optimizelegibility;
 | 
						|
  font-feature-settings: "kern";
 | 
						|
  text-size-adjust: none;
 | 
						|
  -webkit-tap-highlight-color: rgba(0,0,0,0);
 | 
						|
  -webkit-tap-highlight-color: transparent;
 | 
						|
 | 
						|
  // This is done because we want to use mastodon-font-sans-serif (a.k.a Roboto) on the `.ui` element in the app UI
 | 
						|
  &:not(.app-body) {
 | 
						|
    font-family: 'mastodon-font-sans-serif', sans-serif;
 | 
						|
  }
 | 
						|
 | 
						|
  &.app-body {
 | 
						|
    position: fixed;
 | 
						|
    width: 100%;
 | 
						|
    height: 100%;
 | 
						|
    padding: 0;
 | 
						|
    background: $ui-base-color;
 | 
						|
  }
 | 
						|
 | 
						|
  &.about-body {
 | 
						|
    background: darken($ui-base-color, 8%);
 | 
						|
    padding-bottom: 0;
 | 
						|
  }
 | 
						|
 | 
						|
  &.embed {
 | 
						|
    background: transparent;
 | 
						|
    margin: 0;
 | 
						|
 | 
						|
    .container {
 | 
						|
      position: absolute;
 | 
						|
      width: 100%;
 | 
						|
      height: 100%;
 | 
						|
      overflow: hidden;
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  &.admin {
 | 
						|
    background: darken($ui-base-color, 4%);
 | 
						|
    position: fixed;
 | 
						|
    width: 100%;
 | 
						|
    height: 100%;
 | 
						|
    padding: 0;
 | 
						|
  }
 | 
						|
 | 
						|
  @media screen and (max-width: 400px) {
 | 
						|
    padding-bottom: 0;
 | 
						|
  }
 | 
						|
}
 | 
						|
 | 
						|
button {
 | 
						|
  font-family: inherit;
 | 
						|
  cursor: pointer;
 | 
						|
 | 
						|
  &:focus {
 | 
						|
    outline: none;
 | 
						|
  }
 | 
						|
}
 | 
						|
 | 
						|
.app-holder {
 | 
						|
  display: flex;
 | 
						|
  width: 100%;
 | 
						|
  height: 100%;
 | 
						|
  align-items: center;
 | 
						|
  justify-content: center;
 | 
						|
}
 | 
						|
 | 
						|
.ui.system-font {
 | 
						|
  // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)
 | 
						|
  // -apple-system => Safari <11 specific
 | 
						|
  // BlinkMacSystemFont => Chrome <56 on macOS specific
 | 
						|
  // Segoe UI => Windows 7/8/10
 | 
						|
  // Oxygen => KDE
 | 
						|
  // Ubuntu => Unity/Ubuntu
 | 
						|
  // Cantarell => GNOME
 | 
						|
  // Fira Sans => Firefox OS
 | 
						|
  // Droid Sans => Older Androids (<4.0)
 | 
						|
  // Helvetica Neue => Older macOS <10.11
 | 
						|
  // mastodon-font-sans-serif => web-font (Roboto) fallback and newer Androids (>=4.0)
 | 
						|
  font-family: system-ui, -apple-system,BlinkMacSystemFont, "Segoe UI","Oxygen", "Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",mastodon-font-sans-serif, sans-serif;
 | 
						|
}
 | 
						|
 | 
						|
.ui:not(.system-font) {
 | 
						|
  font-family: 'mastodon-font-sans-serif', sans-serif;
 | 
						|
}
 |