.main-wrapper { position: relative; margin-left: auto; margin-right: auto; } .main-wrapper--mac { margin-top: calc(var(--header-height) + var(--mac-titlebar-height)); } .main-wrapper__inner { display: flex; align-items: flex-start; justify-content: space-between; min-height: calc(100vh - var(--header-height)); margin-left: auto; margin-right: auto; margin-top: var(--header-height); padding: var(--spacing-l); // Unfortunately this is coupled with .claim-preview--tile width calculation padding-left: 0; padding-right: 0; > :first-child { flex-shrink: 0; } @media (max-width: $breakpoint-small) { padding: var(--spacing-xs); padding-top: var(--spacing-m); } @media (min-width: $breakpoint-large) { width: 100%; } } .main-wrapper__inner--filepage { padding: 0; padding-top: var(--spacing-s); } .main-wrapper__inner--theater-mode { padding-top: 0; } .main { position: relative; width: calc(100% - var(--side-nav-width) - var(--spacing-l)); max-width: var(--page-max-width); z-index: 0; margin-right: auto; margin-left: auto; @media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) { margin: 0 var(--spacing-l); } @media (max-width: $breakpoint-medium) { width: 100%; } } .main--file-page { width: 100%; max-width: var(--page-max-width--filepage); margin-left: auto; margin-right: auto; display: flex; align-items: flex-start; padding-left: var(--spacing-m); padding-right: var(--spacing-m); position: relative; > :first-child { flex-grow: 2; } .file-page__secondary-content { display: flex; flex-direction: column; justify-content: center; width: 100%; margin-top: var(--spacing-m); max-width: var(--page-max-width--filepage); margin-left: auto; margin-right: auto; > :first-child { flex: 1; } @media (min-width: $breakpoint-medium) { flex-direction: row; } } .file-page__info { margin-top: var(--spacing-m); } .file-page__recommended { height: 0%; width: 35rem; margin-left: var(--spacing-m); @media (max-width: $breakpoint-small) { margin-left: 0; } @media (max-width: $breakpoint-medium) { width: 100%; margin-top: var(--spacing-l); } } @media (max-width: $breakpoint-medium) { > :first-child { margin-right: 0; } } @media (max-width: $breakpoint-small) { padding: var(--spacing-xs); padding-top: 0; } } .main--theater-mode { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; margin-top: 0; width: 100vw; max-width: none; > :first-child { margin-right: 0; } .file-page__info { padding: 0 var(--spacing-m); margin-top: var(--spacing-m); max-width: var(--page-max-width--filepage); display: flex; flex-direction: column; margin-left: auto; margin-right: auto; } .file-page__recommended { width: 25rem; } .file-page__secondary-content { padding: 0 var(--spacing-s); @media (min-width: $breakpoint-medium) { flex-direction: row; } } } .main--full-width { @extend .main; @media (min-width: $breakpoint-large) { max-width: none; width: 100%; margin: 0 var(--spacing-l); } } .main--auth-page { width: 100%; max-width: 70rem; margin-left: auto; margin-right: auto; padding: 0 var(--spacing-s); @media (min-width: $breakpoint-small) { margin-top: var(--spacing-main-padding); padding: 0 var(--spacing-l); } } .main__auth-content { display: flex; position: relative; flex-direction: column; padding-bottom: var(--spacing-xl); @media (min-width: $breakpoint-small) { flex-direction: row; > :first-child { position: fixed; background-color: var(--color-background); width: calc(40% - var(--spacing-l)); margin-top: var(--spacing-xl); } > :nth-child(2) { width: 50%; margin-left: auto; } } @media (min-width: $breakpoint-medium) { > :first-child { width: calc(30% - var(--spacing-l)); max-width: 25rem; } > :nth-child(2) { width: 50%; margin-left: auto; } } } .main--buy { @extend .main--auth-page; max-width: 30rem; min-height: 400px; .card { height: 100%; margin: 0; padding: 0; } iframe { min-height: 420px; background-color: var(--color-card-background); margin-bottom: 2rem; } .sm:bg-grey-lighter { background-color: var(--color-card-background); } } .main--empty { align-self: center; display: flex; align-items: center; flex-direction: column; text-align: center; padding: 0 var(--spacing-m); margin-top: var(--spacing-l); margin-bottom: var(--spacing-l); width: 100%; > .card { width: 100%; } @media (min-width: $breakpoint-small) { margin-top: 100px; margin-bottom: 100px; } } .main--launching { width: 100vw; height: 100vh; background-color: var(--color-background); } .main--contained { margin: auto; display: flex; flex-direction: column; align-items: flex-start; max-width: 60rem; text-align: left; & > * { width: 100%; } } .main--hoisted { margin-top: calc(var(--spacing-s) * -1); @media (min-width: $breakpoint-small) { margin-top: calc(var(--spacing-l) * -1); } } .main__sign-in, .main__sign-up { max-width: 27rem; margin-left: auto; margin-right: auto; } .main__channel-creation { margin-left: auto; margin-right: auto; max-width: 32rem; } .main-wrapper--scrollbar { // The W3C future standard; currently supported by Firefox only. // It'll hopefully auto fallback to this when 'webkit-scrollbar' below is deprecated in the future. scrollbar-width: auto; scrollbar-color: var(--color-scrollbar-thumb-bg) var(--color-scrollbar-track-bg); } .main-wrapper--scrollbar *::-webkit-scrollbar { width: 12px; } .main-wrapper--scrollbar *::-webkit-scrollbar-track { background: var(--color-scrollbar-track-bg); } .main-wrapper--scrollbar *::-webkit-scrollbar-thumb { // Don't set 'border-radius' because Firefox's 'scrollbar-xx' // standard currently doesn't support it. Stick with square // scrollbar for all browsers. background-color: var(--color-scrollbar-thumb-bg); }