ad19495702
Naomi comment websockets increase slow mode time to 5 seconds fix to prevent duplicate comments update livestream details fix channel pin electron boom fix rebase prune unused icons updating meme updating meme update livestream for naomi fix rebase DigitalCashNetwork remove electroboom pin Slavguns Joel So he can edit his claims add streamTypes param to claimTilesDiscover so following section can search for all types of content fix typo
342 lines
6.5 KiB
SCSS
342 lines
6.5 KiB
SCSS
.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;
|
|
}
|
|
|
|
.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;
|
|
margin-top: var(--spacing-m);
|
|
padding: 0 var(--spacing-m);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
|
|
> :first-child {
|
|
flex-grow: 2;
|
|
}
|
|
|
|
.file-page__secondary-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
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__post-comments {
|
|
margin-top: var(--spacing-l);
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
padding: var(--spacing-m);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
margin-top: var(--spacing-s);
|
|
}
|
|
|
|
@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);
|
|
flex-direction: column;
|
|
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--livestream {
|
|
margin-top: var(--spacing-m);
|
|
}
|
|
|
|
.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--markdown {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.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);
|
|
}
|