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

184 lines
3.3 KiB
SCSS
Raw Normal View History

2018-03-26 23:32:43 +02:00
.header {
2019-06-11 20:10:58 +02:00
z-index: 2; // Main content uses z-index: 1, 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;
background-color: transparent;
border-bottom: none;
}
2019-10-09 18:34:18 +02:00
.header--mac {
padding-top: var(--mac-titlebar-height);
}
2019-11-22 22:13:00 +01:00
.header--noauth-web {
.header__navigation-item--icon {
margin: 0 10px;
}
}
2019-06-11 20:10:58 +02:00
.header__contents {
max-width: var(--page-max-width);
2019-07-21 23:31:22 +02:00
height: calc(var(--header-height) - 1px);
2019-06-11 20:10:58 +02:00
display: flex;
2019-12-18 06:27:08 +01:00
align-items: center;
2019-06-11 20:10:58 +02:00
margin: auto;
2019-07-23 10:05:51 +02:00
padding: 0 var(--spacing-large);
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
padding: var(--spacing-small);
}
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;
2020-01-02 17:30:27 +01:00
height: var(--height-input);
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-08-27 16:43:42 +02:00
2019-09-26 18:07:11 +02:00
> .button:only-child {
2019-08-27 16:43:42 +02:00
margin-left: auto;
}
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
display: none;
}
}
.header__menu--mobile {
display: none;
@media (max-width: $breakpoint-small) {
display: block;
margin-left: var(--spacing-medium);
svg {
stroke: var(--color-text);
}
}
2019-08-21 22:54:44 +02:00
}
2019-11-22 22:13:00 +01:00
.header__menu--with-balance {
button:first-child {
margin-left: var(--spacing-large);
margin-right: var(--spacing-medium);
}
2019-09-26 18:07:11 +02:00
}
.header__navigation-arrows {
display: flex;
2019-06-11 21:02:13 +02:00
margin-right: var(--spacing-small);
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);
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;
margin-left: var(--spacing-small);
&:hover {
background-color: var(--color-primary-alt);
}
2020-01-02 21:36:03 +01:00
&:focus {
@include focus;
}
2020-01-30 21:55:45 +01:00
span {
display: flex;
justify-content: center;
align-items: center;
}
}
2019-03-29 15:23:32 +01:00
.header__navigation-item--lbry {
2019-11-07 20:39:22 +01:00
font-weight: var(--font-weight-bold);
2019-06-11 21:02:13 +02:00
margin-right: var(--spacing-medium);
.lbry-icon {
height: 2rem;
width: 2rem;
}
}
2020-01-02 17:30:27 +01:00
2020-02-28 06:18:37 +01:00
.header__navigation-item--button-mobile {
@media (max-width: $breakpoint-small) {
.button__label {
display: none;
}
}
}
2020-01-02 17:30:27 +01:00
.header__navigation-item--balance {
margin: 0 var(--spacing-medium);
}
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;
padding: var(--spacing-miniscule) var(--spacing-medium);
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;
margin-left: var(--spacing-small);
}