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

216 lines
3.8 KiB
SCSS
Raw Normal View History

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);
2020-01-22 15:26:39 +01:00
box-shadow: var(--card-box-shadow);
2019-07-21 23:31:22 +02:00
font-size: var(--font-body);
2019-10-09 18:34:18 +02:00
-webkit-user-select: none;
-webkit-app-region: drag;
2019-06-28 09:33:07 +02:00
& > * {
user-select: none;
}
2018-06-25 08:07:45 +02:00
}
2019-08-27 16:43:42 +02:00
.header--minimal {
box-shadow: none;
2021-04-26 21:19:17 +02:00
background-color: var(--color-background);
2019-08-27 16:43:42 +02:00
border-bottom: none;
}
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 {
2020-08-10 22:47:39 +02:00
height: calc(var(--header-height));
2019-06-11 20:10:58 +02:00
display: flex;
2019-12-18 06:27:08 +01:00
align-items: center;
2020-08-10 22:47:39 +02:00
padding: 0 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);
2019-12-18 06:27:08 +01:00
}
2019-06-11 20:10:58 +02:00
}
.header__navigation {
2019-08-21 22:54:44 +02:00
flex: 1;
2018-06-25 08:07:45 +02:00
display: flex;
2019-11-22 22:13:00 +01:00
align-items: center;
2018-06-25 08:07:45 +02:00
}
2019-08-21 22:54:44 +02:00
.header__menu {
margin-left: auto;
display: flex;
justify-content: space-between;
align-items: center;
2019-12-18 06:27:08 +01:00
}
2020-08-10 22:47:39 +02:00
.header__buttons {
display: flex;
2019-04-01 01:04:01 +02:00
}
.header__navigation-item {
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);
color: var(--color-text);
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
}
2019-11-22 22:13:00 +01:00
&:hover {
color: var(--color-link-active);
2019-03-28 17:53:13 +01:00
2019-05-01 07:16:12 +02:00
svg {
2019-11-22 22:13:00 +01:00
stroke: var(--color-link-active);
2019-05-01 07:16:12 +02:00
}
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__navigation-item--icon {
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-primary-alt);
}
2020-01-02 21:36:03 +01:00
2020-05-11 16:21:00 +02:00
@media (min-width: $breakpoint-small) {
&:focus {
@include focus;
}
2020-01-02 21:36:03 +01:00
}
2020-01-30 21:55:45 +01:00
span {
display: flex;
justify-content: center;
align-items: center;
}
}
2020-10-05 20:04:31 +02:00
.header__navigation-item--profile-pic {
margin-left: var(--spacing-m);
2020-10-05 20:04:31 +02:00
.channel-thumbnail {
height: var(--height-button);
width: var(--height-button);
margin-right: 0;
}
&:hover {
opacity: 0.7;
}
}
2020-08-26 22:28:33 +02:00
.header__navigation-item--balance {
@extend .button--file-action;
margin: 0 var(--spacing-s);
color: var(--color-text);
&:hover {
color: var(--color-text);
}
2020-08-26 22:28:33 +02:00
}
2020-08-20 07:34:07 +02:00
.header__navigation-item--forward {
margin-right: 0;
}
2020-08-10 22:47:39 +02:00
.header__navigation-item--icon {
@media (max-width: $breakpoint-small) {
2020-08-11 22:32:03 +02:00
margin: 0;
2020-08-10 22:47:39 +02:00
}
}
2019-03-29 15:23:32 +01:00
.header__navigation-item--lbry {
2021-04-26 21:19:17 +02:00
height: 4rem;
display: flex;
align-items: center;
margin-left: var(--spacing-m);
margin-right: var(--spacing-m);
2021-04-27 04:43:06 +02:00
// move to lbry theme?
.lbry-icon {
height: var(--height-button);
width: var(--height-button);
}
2021-04-26 21:19:17 +02:00
@media (max-width: $breakpoint-small) {
margin-right: var(--spacing-m);
height: 5rem;
.button__label {
display: none;
}
}
}
.header--minimal {
.header__navigation-item--lbry {
height: 3rem;
}
2020-01-02 17:30:27 +01:00
}
2020-02-13 02:48:28 +01:00
.header__navigation-dropdown {
@extend .menu__list--header;
padding: 0;
position: absolute;
list-style-type: none;
background-color: var(--color-header-background);
2020-02-13 02:48:28 +01:00
}
2020-02-13 02:48:28 +01:00
.header__navigation-button {
margin: 0;
2020-06-01 19:03:19 +02:00
padding: var(--spacing-xxs) var(--spacing-m);
2020-02-13 02:48:28 +01:00
display: flex;
align-items: center;
2020-02-13 02:48:28 +01:00
&:hover {
cursor: pointer;
background-color: var(--color-menu-background--active);
}
}
2020-02-13 02:48:28 +01:00
.header__navigation-button-help {
@extend .help;
margin-top: 0;
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-s);
2020-02-13 02:48:28 +01:00
}
.header__auth-buttons {
display: flex;
align-items: center;
font-weight: var(--font-weight-bold);
2020-12-11 23:00:32 +01:00
margin-left: var(--spacing-s);
& > *:not(:last-child) {
2020-06-01 19:03:19 +02:00
margin: 0 var(--spacing-m);
}
}
2020-08-10 22:47:39 +02:00
.header__center {
display: flex;
2020-12-11 19:33:27 +01:00
justify-content: flex-end;
2020-08-10 22:47:39 +02:00
width: 100%;
2020-12-11 19:33:27 +01:00
@media (min-width: $breakpoint-small) {
justify-content: center;
}
2020-08-10 22:47:39 +02:00
}
2020-09-03 22:05:38 +02:00
.header__auth-title {
@media (min-width: $breakpoint-small) {
font-size: var(--font-large);
}
}