459 lines
9.6 KiB
SCSS
459 lines
9.6 KiB
SCSS
@import '../init/breakpoints';
|
|
@import '../init/mixins';
|
|
|
|
.header {
|
|
z-index: 3; // Main content uses z-index: 1, other content uses z-index: 2, this ensures it always scrolls under the header
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
background-color: var(--color-header-background);
|
|
font-size: var(--font-body);
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-webkit-app-region: drag;
|
|
-webkit-backdrop-filter: blur(4px);
|
|
backdrop-filter: blur(4px);
|
|
|
|
.skip-button {
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
margin-right: var(--spacing-l);
|
|
|
|
&:focus {
|
|
opacity: 1;
|
|
position: relative;
|
|
overflow: unset;
|
|
width: unset;
|
|
height: unset;
|
|
}
|
|
}
|
|
|
|
.header__menu--right {
|
|
.header__navigationItem--balance {
|
|
.button__label {
|
|
margin-left: var(--spacing-xxs) !important;
|
|
}
|
|
&:hover {
|
|
.button__label {
|
|
color: var(--color-odysee-contrast) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.button--link {
|
|
color: var(--color-odysee) !important;
|
|
&:hover {
|
|
color: var(--color-link-hover) !important;
|
|
}
|
|
}
|
|
.button--primary {
|
|
background-color: var(--color-odysee) !important;
|
|
color: var(--color-odysee-contrast) !important;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
.card__actions--between {
|
|
.header__menu--left,
|
|
.header__menu--right {
|
|
width: 5rem;
|
|
min-width: 5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
*:focus-visible:not(.wunderbar__input):not(.menu__list):not(.menu__list--header):not(.button--secondary):not(.button-like):not(.button-dislike):not(select):not(input):not(textarea):not(video) {
|
|
background-color: rgba(var(--color-primary-static), 0.2) !important;
|
|
color: var(--color-text) !important;
|
|
// outline: 2px solid var(--color-primary);
|
|
box-shadow: 0px 0px 0px 2px var(--color-odysee) inset;
|
|
|
|
.icon {
|
|
stroke: var(--color-text) !important;
|
|
}
|
|
}
|
|
|
|
select:focus-visible,
|
|
input:focus-visible:not(.wunderbar__input),
|
|
textarea:focus-visible {
|
|
box-shadow: 0px 0px 0px 2px var(--color-odysee) inset;
|
|
}
|
|
|
|
.ff-container {
|
|
canvas {
|
|
border-radius: 50%;
|
|
}
|
|
.freezeframe-img {
|
|
width: var(--height-button) !important;
|
|
height: var(--height-button) !important;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header--minimal {
|
|
box-shadow: none;
|
|
background-color: var(--color-header-background);
|
|
border-bottom: none;
|
|
|
|
.header__navigation {
|
|
padding: var(--spacing-xs);
|
|
}
|
|
|
|
.header__navigationItem--logo {
|
|
height: 3rem;
|
|
}
|
|
|
|
.header__menu--left,
|
|
.header__menu--right {
|
|
width: unset;
|
|
min-width: unset;
|
|
}
|
|
}
|
|
|
|
.header__contents {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
height: var(--header-height);
|
|
padding: var(--spacing-s) var(--spacing-m);
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
padding: var(--spacing-xs);
|
|
height: var(--header-height-mobile);
|
|
}
|
|
}
|
|
|
|
.header__navigation {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex: 1;
|
|
height: var(--header-height);
|
|
padding: var(--spacing-s) var(--spacing-m);
|
|
flex-wrap: nowrap;
|
|
|
|
.wunderbar__wrapper {
|
|
.wunderbar__input {
|
|
background-color: var(--color-header-button) !important;
|
|
}
|
|
|
|
&:hover {
|
|
.wunderbar__input {
|
|
outline: 2px solid var(--color-header-button-hover) !important;
|
|
}
|
|
}
|
|
|
|
.wunderbar__input:focus-visible {
|
|
outline: 2px solid var(--color-header-button-hover) !important;
|
|
}
|
|
}
|
|
|
|
.button--alt {
|
|
background-color: var(--color-header-button);
|
|
color: var(--color-text);
|
|
|
|
&:hover {
|
|
background-color: var(--color-odysee);
|
|
color: var(--color-odysee-contrast);
|
|
}
|
|
}
|
|
|
|
.button__content {
|
|
&:hover {
|
|
.button__label {
|
|
color: var(--color-odysee-contrast);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
padding: var(--spacing-xs);
|
|
height: var(--header-height-mobile);
|
|
|
|
.button--alt {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
|
|
.button__content {
|
|
width: unset;
|
|
height: 22px;
|
|
}
|
|
}
|
|
|
|
.header__navigationItem--logo {
|
|
border-radius: 50%;
|
|
svg {
|
|
width: calc(var(--header-height-mobile) - var(--spacing-m));
|
|
height: calc(var(--header-height-mobile) - var(--spacing-m));
|
|
}
|
|
}
|
|
|
|
.button,
|
|
.header__navigationItem--icon {
|
|
width: calc(var(--header-height-mobile) - var(--spacing-m));
|
|
height: calc(var(--header-height-mobile) - var(--spacing-m));
|
|
background-color: rgba(var(--color-primary-static), 0.6);
|
|
.icon {
|
|
stroke: var(--color-odysee-contrast);
|
|
}
|
|
}
|
|
|
|
.channel-thumbnail {
|
|
width: calc(var(--header-height-mobile) - var(--spacing-m)) !important;
|
|
height: calc(var(--header-height-mobile) - var(--spacing-m)) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wunderbar__wrapper--mobile {
|
|
border-bottom: unset !important;
|
|
.wunderbar__input {
|
|
border-radius: var(--border-radius) !important;
|
|
background-color: var(--color-header-button) !important;
|
|
&:focus-visible,
|
|
&:focus {
|
|
outline: 2px solid var(--color-odysee) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header__menu {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
width: 15rem;
|
|
min-width: 15rem;
|
|
}
|
|
}
|
|
|
|
.header__menu--left {
|
|
@extend .header__menu;
|
|
justify-content: flex-start;
|
|
margin-left: var(--spacing-s);
|
|
@media (max-width: $breakpoint-small) {
|
|
margin-left: unset;
|
|
}
|
|
}
|
|
|
|
.header__menu--right {
|
|
@extend .header__menu;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.header__buttons {
|
|
display: flex;
|
|
}
|
|
|
|
.header__logo {
|
|
height: var(--height-button);
|
|
max-width: -webkit-fit-content;
|
|
max-width: -moz-fit-content;
|
|
max-width: fit-content;
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
height: var(--height-button-mobile);
|
|
}
|
|
}
|
|
|
|
.header__navigationItem {
|
|
height: var(--height-button);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: var(--border-radius);
|
|
position: relative;
|
|
font-weight: var(--font-weight-bold);
|
|
|
|
svg {
|
|
stroke: var(--color-text);
|
|
}
|
|
|
|
&[aria-expanded='true']:not(.header__navigationItem--profilePic) {
|
|
transform: rotate(0deg);
|
|
&:not(.button-rotate) {
|
|
background-color: var(--color-header-button-hover);
|
|
|
|
.icon {
|
|
stroke: var(--color-odysee-contrast);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
height: var(--height-button-mobile);
|
|
}
|
|
}
|
|
|
|
.header__navigationItem--icon {
|
|
@extend .header__navigationItem;
|
|
width: var(--height-button);
|
|
background-color: var(--color-header-button);
|
|
border-radius: 1.5rem;
|
|
margin-right: var(--spacing-s);
|
|
|
|
&:hover {
|
|
background-color: var(--color-odysee);
|
|
|
|
.icon {
|
|
stroke: var(--color-odysee-contrast);
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
margin: 0;
|
|
width: calc(var(--header-height-mobile) - var(--spacing-m));
|
|
height: calc(var(--header-height-mobile) - var(--spacing-m));
|
|
}
|
|
|
|
span {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.header__navigationItem--profilePic {
|
|
margin-right: var(--spacing-s);
|
|
border-radius: 50%;
|
|
|
|
.channel-thumbnail {
|
|
height: var(--height-button);
|
|
width: var(--height-button);
|
|
margin-right: 0;
|
|
}
|
|
|
|
.channel-staked__tooltip {
|
|
display: none;
|
|
}
|
|
|
|
&:hover {
|
|
.ff-canvas {
|
|
opacity: 0 !important;
|
|
transition: opacity 1s !important;
|
|
}
|
|
.ff-image {
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
margin: 0;
|
|
|
|
.channel-thumbnail {
|
|
height: var(--height-button-mobile);
|
|
width: var(--height-button-mobile);
|
|
}
|
|
}
|
|
}
|
|
|
|
.header__navigationItem--iconSkeleton {
|
|
@extend .header__navigationItem--icon;
|
|
height: var(--height-button) !important;
|
|
width: var(--height-button) !important;
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
height: calc(var(--header-height-mobile) - var(--spacing-m)) !important;
|
|
width: calc(var(--header-height-mobile) - var(--spacing-m)) !important;
|
|
}
|
|
}
|
|
|
|
.header__navigationItem--balance {
|
|
@extend .header__navigationItem;
|
|
margin: 0 var(--spacing-s);
|
|
padding-left: var(--spacing-s);
|
|
padding-right: var(--spacing-s);
|
|
background-color: var(--color-header-button);
|
|
|
|
&:hover {
|
|
background-color: var(--color-header-button-hover);
|
|
color: var(--color-primary-contrast);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
width: 5rem;
|
|
}
|
|
}
|
|
|
|
.header__navigationItem--balanceLoading {
|
|
margin: 0 var(--spacing-s);
|
|
width: 4rem;
|
|
background-color: var(--color-header-button);
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
margin: 0 !important;
|
|
width: 5rem;
|
|
}
|
|
}
|
|
|
|
.header__navigationItem--logo {
|
|
@extend .header__navigationItem;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 var(--spacing-s);
|
|
color: var(--color-text);
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
width: 150px;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
// margin-right: var(--spacing-m);
|
|
margin: 0;
|
|
|
|
.button__label {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header__authButtons {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: var(--font-weight-bold);
|
|
|
|
& > *:not(:last-child) {
|
|
margin: 0 var(--spacing-m);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
.button--link {
|
|
margin: 0;
|
|
}
|
|
|
|
.button--primary {
|
|
padding: var(--spacing-xxs);
|
|
}
|
|
}
|
|
}
|
|
|
|
.header__center {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.header__authTitle {
|
|
@extend .header__center;
|
|
justify-content: center;
|
|
|
|
@media (min-width: $breakpoint-small) {
|
|
font-size: var(--font-large);
|
|
}
|
|
}
|
|
|
|
.ReactModal__Overlay {
|
|
.button--close {
|
|
margin: 0;
|
|
}
|
|
}
|