.main-wrapper { position: relative; [data-mode='dark'] & { background-color: var(--dm-color-08); } } .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)); max-width: var(--page-max-width); margin-left: auto; margin-right: auto; margin-top: var(--header-height); padding: var(--spacing-large); } .main { position: relative; width: calc(100% - var(--side-nav-width) - var(--spacing-large)); margin-right: var(--spacing-main-padding); @media (max-width: 600px) { width: 100%; margin-right: 0; margin-left: 0; } } .main--file-page { position: relative; .grid-area--info { margin-right: var(--spacing-large); width: 52.5%; } .grid-area--related { width: calc(47.5% - var(--spacing-large)); } } .main--auth-page { max-width: 60rem; margin-top: var(--spacing-main-padding); margin-left: auto; margin-right: auto; } .main--empty { align-self: center; display: flex; align-items: center; flex-direction: column; margin-top: 100px; margin-bottom: 100px; text-align: center; } .main--launching { width: 100vw; height: 100vh; background-color: var(--color-background); } .main--contained { margin: auto; margin-top: 5rem; display: flex; flex-direction: column; align-items: flex-start; max-width: 40rem; text-align: left; & > * { width: 100%; } } .main--full-width { width: 100%; } .main__status { @extend .card__subtitle; display: flex; justify-content: space-between; background-color: $lbry-teal-4; color: $lbry-white; svg { stroke: $lbry-white; } [data-mode='dark'] & { background-color: $lbry-teal-5; color: $lbry-white; } }