lbry-desktop/ui/scss/component/_header.scss

467 lines
9.6 KiB
SCSS
Raw Permalink Normal View History

@import '../init/breakpoints';
@import '../init/mixins';
2018-03-26 23:32:43 +02:00
.header {
2020-04-30 17:01:11 +02:00
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;
2019-06-11 20:10:58 +02:00
top: 0;
2018-06-25 08:07:45 +02:00
width: 100%;
2019-11-22 22:13:00 +01:00
background-color: var(--color-header-background);
2019-07-21 23:31:22 +02:00
font-size: var(--font-body);
user-select: none;
2019-10-09 18:34:18 +02:00
-webkit-user-select: none;
-webkit-app-region: drag;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
2019-06-28 09:33:07 +02:00
.skip-button {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: hidden;
2021-07-15 22:14:21 +02:00
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);
}
&:hover {
.button__label {
color: var(--color-primary);
}
.icon {
stroke: var(--color-primary);
}
}
}
}
.button--link {
color: var(--color-brand) !important;
&:hover {
color: var(--color-link-hover) !important;
}
}
.button--primary {
background-color: var(--color-brand) !important;
color: var(--color-brand-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;
box-shadow: 0px 0px 0px 2px var(--color-brand) 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-brand) inset;
}
.ff-container {
canvas {
border-radius: 50%;
}
.freezeframe-img {
width: var(--height-button) !important;
height: var(--height-button) !important;
border-radius: 50%;
}
}
2018-06-25 08:07:45 +02:00
}
2019-08-27 16:43:42 +02:00
.header--minimal {
box-shadow: none;
background-color: var(--color-header-background);
2019-08-27 16:43:42 +02:00
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;
}
2019-10-09 18:34:18 +02:00
}
.header--mac {
padding-top: var(--mac-titlebar-height);
}
2019-06-11 20:10:58 +02:00
.header__contents {
display: flex;
2019-12-18 06:27:08 +01:00
align-items: center;
flex: 1;
height: var(--header-height);
padding: var(--spacing-s) var(--spacing-m);
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
2020-08-18 16:17:45 +02:00
padding: var(--spacing-xs);
height: var(--header-height-mobile);
2019-12-18 06:27:08 +01:00
}
2019-06-11 20:10:58 +02:00
}
.header__navigation {
2018-06-25 08:07:45 +02:00
display: flex;
2019-11-22 22:13:00 +01:00
align-items: center;
justify-content: space-between;
flex: 1;
height: var(--header-height);
padding: var(--spacing-s) 0;
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-primary) !important;
}
}
.button--alt {
background-color: var(--color-header-button);
color: var(--color-text);
&:hover {
color: var(--color-brand-contrast);
}
}
.button__content {
&:hover {
.button__label {
color: var(--color-brand-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 {
2022-04-20 23:17:47 +02:00
stroke: var(--color-text);
}
}
.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-brand) !important;
}
}
2018-06-25 08:07:45 +02:00
}
2019-08-21 22:54:44 +02:00
.header__menu {
display: flex;
align-items: center;
@media (min-width: $breakpoint-small) {
width: 15rem;
min-width: 15rem;
}
2019-12-18 06:27:08 +01:00
}
.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;
}
2020-08-10 22:47:39 +02:00
.header__buttons {
display: flex;
2019-04-01 01:04:01 +02:00
}
.header__navigation--logo {
height: var(--height-button);
}
// above
.header__logo {
2021-07-30 18:07:32 +02:00
height: var(--height-button);
max-width: fit-content;
@media (max-width: $breakpoint-small) {
height: var(--height-button-mobile);
}
2021-07-30 18:07:32 +02:00
}
.header__navigationItem {
2019-11-22 22:13:00 +01:00
height: var(--height-button);
2019-03-29 15:23:32 +01:00
display: flex;
justify-content: center;
align-items: center;
2019-11-22 22:13:00 +01:00
border-radius: var(--border-radius);
2020-07-23 16:22:57 +02:00
position: relative;
2020-08-10 22:47:39 +02:00
font-weight: var(--font-weight-bold);
2018-06-25 08:07:45 +02:00
&[aria-expanded='true']:not(.header__navigationItem--profilePic) {
transform: rotate(0deg);
&:not(.button-rotate) {
background-color: var(--color-header-button-hover);
}
}
@media (max-width: $breakpoint-small) {
height: var(--height-button-mobile);
2018-06-25 08:07:45 +02:00
}
&:hover {
.button__label {
color: var(--color-brand) !important;
}
.icon {
stroke: var(--color-brand);
}
}
2019-03-28 17:53:13 +01:00
}
2019-03-29 15:23:32 +01:00
.header__navigation-item--back,
2019-11-22 22:13:00 +01:00
.header__navigation-item--forward,
.header__navigationItem--icon {
@extend .header__navigationItem;
2020-01-02 17:30:27 +01:00
width: var(--height-button);
background-color: var(--color-header-button);
border-radius: 1.5rem;
2020-08-10 22:47:39 +02:00
margin-right: var(--spacing-s);
color: var(--color-header-button-text);
2020-01-02 17:30:27 +01:00
&:hover {
.icon {
stroke: var(--color-primary);
color: var(--color-brand);
2020-05-11 16:21:00 +02:00
}
2020-01-02 21:36:03 +01:00
}
2020-01-30 21:55:45 +01:00
@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));
}
2020-01-30 21:55:45 +01:00
span {
display: flex;
justify-content: center;
align-items: center;
}
}
.header__navigationItem--profilePic {
margin-right: var(--spacing-s);
border-radius: 50%;
2020-10-05 20:04:31 +02:00
.channel-thumbnail {
height: var(--height-button);
width: var(--height-button);
margin-right: 0;
}
.channel-staked__tooltip {
display: none;
}
2020-10-05 20:04:31 +02:00
&: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;
2020-10-05 20:04:31 +02:00
}
}
.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 {
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;
}
2020-08-26 22:28:33 +02:00
}
.header__navigationItem--logo {
@extend .header__navigationItem;
2021-04-26 21:19:17 +02:00
display: flex;
align-items: center;
margin: 0 var(--spacing-s);
2021-07-26 00:40:53 +02:00
color: var(--color-text);
2021-04-27 04:43:06 +02:00
.lbry-icon {
height: var(--height-button);
width: var(--height-button);
}
2021-04-26 21:19:17 +02:00
@media (max-width: $breakpoint-small) {
margin: 0;
2021-04-26 21:19:17 +02:00
.button__label {
display: none;
}
}
}
.header__authButtons {
display: flex;
align-items: center;
font-weight: var(--font-weight-bold);
& > *:not(:last-child) {
2020-06-01 19:03:19 +02:00
margin: 0 var(--spacing-m);
}
@media (max-width: $breakpoint-small) {
.button--link {
margin: 0;
}
.button--primary {
padding: var(--spacing-xxs);
}
}
}
2020-08-10 22:47:39 +02:00
.header__center {
display: flex;
justify-content: center;
2020-08-10 22:47:39 +02:00
width: 100%;
}
.header__authTitle {
@extend .header__center;
justify-content: center;
2020-12-11 19:33:27 +01:00
@media (min-width: $breakpoint-small) {
font-size: var(--font-large);
2020-12-11 19:33:27 +01:00
}
2020-08-10 22:47:39 +02:00
}
2020-09-03 22:05:38 +02:00
.ReactModal__Overlay {
.button--close {
margin: 0;
2020-09-03 22:05:38 +02:00
}
}