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

518 lines
11 KiB
SCSS
Raw Normal View History

2021-12-21 14:51:36 +01:00
@import '../init/breakpoints';
2021-12-21 13:42:28 +01:00
@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;
width: 100vw;
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);
2021-12-21 13:42:28 +01:00
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
button.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;
2021-12-21 13:42:28 +01:00
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;
}
2022-03-09 22:28:37 +01:00
.comment__badge {
padding-right: var(--spacing-xxs);
.icon {
margin-bottom: -4px;
width: 18px;
}
}
@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%;
}
}
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;
2021-12-21 13:42:28 +01:00
.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
}
2019-06-11 20:10:58 +02:00
.header__contents {
display: flex;
2019-12-18 06:27:08 +01:00
align-items: center;
2021-12-21 13:42:28 +01:00
flex: 1;
height: var(--header-height);
padding: var(--spacing-s) var(--spacing-m);
margin-right: var(--body-scrollbar-width);
width: unset;
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);
2021-12-21 14:47:24 +01:00
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;
2021-12-21 13:42:28 +01:00
justify-content: space-between;
flex: 1;
height: var(--header-height);
padding: var(--spacing-s) var(--spacing-m);
flex-wrap: nowrap;
margin-right: var(--body-scrollbar-width);
2021-12-21 13:42:28 +01:00
.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 {
2022-02-14 10:38:43 +01:00
color: var(--color-text);
}
}
}
2021-12-21 14:47:24 +01:00
@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;
}
2021-12-21 13:42:28 +01:00
}
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
}
2021-12-21 13:42:28 +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;
}
2021-12-21 13:42:28 +01:00
}
.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
}
2021-12-21 19:46:32 +01:00
.header__logo {
2021-07-30 18:07:32 +02:00
height: var(--height-button);
2021-08-01 20:11:17 +02:00
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
2021-07-30 18:07:32 +02:00
max-width: fit-content;
2021-12-21 19:46:32 +01:00
@media (max-width: $breakpoint-small) {
height: var(--height-button-mobile);
}
2021-07-30 18:07:32 +02:00
}
2021-12-21 13:42:28 +01: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
2019-11-22 22:13:00 +01:00
svg {
stroke: var(--color-text);
2018-06-25 08:07:45 +02:00
}
2021-12-21 13:42:28 +01:00
&[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);
}
}
2021-12-21 13:42:28 +01:00
}
2021-12-21 14:47:24 +01:00
@media (max-width: $breakpoint-small) {
height: var(--height-button-mobile);
}
2019-03-28 17:53:13 +01:00
}
2021-12-21 13:42:28 +01:00
.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);
2020-01-02 17:30:27 +01:00
&:hover {
background-color: var(--color-odysee);
2020-01-02 21:36:03 +01:00
.icon {
stroke: var(--color-odysee-contrast);
2020-05-11 16:21:00 +02:00
}
2020-01-02 21:36:03 +01:00
}
2020-01-30 21:55:45 +01:00
2021-12-21 13:42:28 +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));
2021-12-21 13:42:28 +01:00
}
2020-01-30 21:55:45 +01:00
span {
display: flex;
justify-content: center;
align-items: center;
}
}
2021-12-21 13:42:28 +01:00
.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;
}
.channel-staked__wrapper {
.icon {
stroke: #131213 !important;
}
}
2020-10-05 20:04:31 +02:00
&:hover {
.ff-canvas {
opacity: 0 !important;
transition: opacity 1s !important;
}
.ff-image {
opacity: 1 !important;
}
2020-10-05 20:04:31 +02:00
}
2021-12-21 14:47:24 +01:00
@media (max-width: $breakpoint-small) {
margin: 0;
.channel-thumbnail {
height: var(--height-button-mobile);
width: var(--height-button-mobile);
}
}
2020-10-05 20:04:31 +02:00
}
.header__navigationItem--iconSkeleton {
@extend .header__navigationItem--icon;
height: var(--height-button) !important;
width: var(--height-button) !important;
2021-12-21 14:47:24 +01:00
@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;
2021-12-21 14:47:24 +01:00
}
}
2021-12-21 13:42:28 +01: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 {
background-color: var(--color-header-button-hover);
color: var(--color-primary-contrast);
}
2021-12-21 14:47:24 +01:00
@media (max-width: $breakpoint-small) {
margin: 0 !important;
padding: 0 !important;
width: 5rem;
}
2020-08-26 22:28:33 +02:00
}
.header__navigationItem--balanceLoading {
margin: 0 var(--spacing-s);
width: 4rem;
background-color: var(--color-header-button);
2021-12-21 14:47:24 +01:00
@media (max-width: $breakpoint-small) {
margin: 0 !important;
width: 5rem;
}
}
2021-12-21 13:42:28 +01:00
.header__navigationItem--logo {
@extend .header__navigationItem;
2021-04-26 21:19:17 +02:00
display: flex;
align-items: center;
2021-12-21 19:46:32 +01:00
margin: 0 var(--spacing-s);
2021-07-26 00:40:53 +02:00
color: var(--color-text);
2021-12-21 19:46:32 +01:00
@media (min-width: $breakpoint-small) {
width: 150px;
2021-04-27 04:43:06 +02:00
}
2021-04-26 21:19:17 +02:00
@media (max-width: $breakpoint-small) {
// margin-right: var(--spacing-m);
margin: 0;
2021-04-26 21:19:17 +02:00
.button__label {
display: none;
}
}
}
2021-12-21 13:42:28 +01:00
.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);
}
2021-12-21 13:42:28 +01:00
@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;
2021-12-21 13:42:28 +01:00
justify-content: center;
2020-08-10 22:47:39 +02:00
width: 100%;
2021-12-21 13:42:28 +01:00
}
.header__authTitle {
@extend .header__center;
justify-content: center;
2020-12-11 19:33:27 +01:00
@media (min-width: $breakpoint-small) {
2021-12-21 13:42:28 +01:00
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
2021-12-21 13:42:28 +01:00
.ReactModal__Overlay {
.ReactModal__Content {
transform: scale(0);
transition: transform 0.2s;
}
2021-12-21 13:42:28 +01:00
.button--close {
margin: 0;
@media (max-width: $breakpoint-small) {
width: var(--height-input);
height: var(--height-input);
margin: var(--spacing-s);
background: var(--color-primary);
.button__content {
align-items: center;
justify-content: center;
2022-06-23 13:53:19 +02:00
color: var(--color-primary-contrast);
}
}
}
}
.ReactModal__Overlay--after-open {
.ReactModal__Content {
transform: scale(1);
transition: transform 0.4s;
2020-09-03 22:05:38 +02:00
}
}
.channel__selector {
width: 100%;
.menu__link {
width: 100% !important;
.claim-preview__title {
text-align: left;
}
.comment__badge {
flex: 1;
text-align: left;
}
.icon--ChevronDown {
margin-left: auto;
margin-right: 0;
}
}
}