mirror of https://github.com/Chocobozzz/PeerTube
408 lines
6.8 KiB
SCSS
408 lines
6.8 KiB
SCSS
@use 'sass:math';
|
|
@use '_variables' as *;
|
|
@use '_mixins' as *;
|
|
|
|
$menu-link-icon-size: 22px;
|
|
$menu-link-icon-margin-right: 18px;
|
|
$footer-links-base-opacity: .8;
|
|
|
|
.menu-link {
|
|
@include disable-default-a-behaviour;
|
|
@include padding-left($menu-lateral-padding);
|
|
@include padding-right(20px);
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
color: pvar(--menuForegroundColor);
|
|
cursor: pointer;
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
transition: background-color .1s ease-in-out;
|
|
line-height: $line-height-normal;
|
|
|
|
&.active {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
&:hover,
|
|
&.focus-visible {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
my-global-icon {
|
|
@include apply-svg-color(#808080);
|
|
@include margin-right($menu-link-icon-margin-right);
|
|
|
|
display: flex;
|
|
width: $menu-link-icon-size;
|
|
height: $menu-link-icon-size;
|
|
}
|
|
}
|
|
|
|
.menu-wrapper {
|
|
position: fixed;
|
|
height: calc(100vh - #{$header-height});
|
|
padding: 0;
|
|
width: $menu-width;
|
|
z-index: z(menu);
|
|
scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
|
|
}
|
|
|
|
menu {
|
|
@include ellipsis;
|
|
|
|
background-color: pvar(--menuBackgroundColor);
|
|
color: pvar(--menuForegroundColor);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@media not all and (hover: hover) and (pointer: fine) {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
&.is-logged-in {
|
|
.panel-block {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.block-title {
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-menu {
|
|
flex-grow: 1;
|
|
width: $menu-width;
|
|
}
|
|
|
|
.logged-in-block {
|
|
margin-bottom: 20px;
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
|
|
> div:first-child {
|
|
height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: left;
|
|
}
|
|
}
|
|
|
|
my-notification {
|
|
@include margin-left(auto);
|
|
@include margin-right(15px);
|
|
}
|
|
|
|
.logged-in-more {
|
|
|
|
@mixin display-hints($is-mobile: false) {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
|
|
@if $is-mobile {
|
|
.dropdown-toggle-indicator {
|
|
display: inherit !important;
|
|
}
|
|
|
|
> .dropdown-toggle {
|
|
max-width: 88% !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include margin-left(13px);
|
|
|
|
flex: 1;
|
|
border-radius: 25px;
|
|
transition: all .1s ease-in-out;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
|
|
&.show {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325);
|
|
}
|
|
|
|
&:hover {
|
|
@include display-hints;
|
|
}
|
|
|
|
/* smartphones and touchscreens */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
@include display-hints($is-mobile: true);
|
|
|
|
/* fill space when on mobile */
|
|
max-width: calc(100% - 80px);
|
|
|
|
.dropdown-toggle {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.logged-in-info {
|
|
max-width: calc(100% - 45px) !important;
|
|
}
|
|
}
|
|
|
|
.dropdown-toggle-indicator {
|
|
position: relative;
|
|
display: none;
|
|
|
|
span {
|
|
position: absolute;
|
|
right: -35px;
|
|
top: -8px;
|
|
color: #808080;
|
|
}
|
|
}
|
|
|
|
.dropdown-toggle::after {
|
|
border: 0;
|
|
}
|
|
|
|
> .dropdown-toggle:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 7px;
|
|
}
|
|
}
|
|
|
|
my-actor-avatar {
|
|
@include margin-right(10px);
|
|
}
|
|
|
|
.logged-in-info {
|
|
max-width: 105px;
|
|
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.logged-in-display-name,
|
|
.logged-in-username {
|
|
@include ellipsis;
|
|
}
|
|
|
|
.logged-in-display-name {
|
|
@include disable-default-a-behaviour;
|
|
|
|
font-weight: $font-semibold;
|
|
color: pvar(--menuForegroundColor);
|
|
}
|
|
|
|
.logged-in-username {
|
|
font-size: 13px;
|
|
color: #C6C6C6;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.logged-in-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
border-top: 1px solid var(--greyForegroundColor);
|
|
line-height: $line-height-normal;
|
|
|
|
a {
|
|
$icon-size: 13px;
|
|
$additional-margin: math.div($menu-link-icon-size - $icon-size, 2);
|
|
|
|
font-size: 14px;
|
|
width: 100%;
|
|
min-height: 35px;
|
|
|
|
my-global-icon {
|
|
// Keep aligned with other icons
|
|
@include margin-left($additional-margin);
|
|
|
|
width: $icon-size;
|
|
height: $icon-size;
|
|
}
|
|
|
|
&.active,
|
|
&:hover,
|
|
&:focus-visible {
|
|
my-global-icon {
|
|
@include apply-svg-color(var(--menuForegroundColor));
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
$border-left-width: 4px;
|
|
|
|
font-weight: $font-semibold;
|
|
border-left: $border-left-width solid var(--mainColor);
|
|
|
|
my-global-icon {
|
|
@include margin-left($additional-margin - $border-left-width);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.login-buttons-block {
|
|
margin: 30px 25px 35px;
|
|
|
|
> a {
|
|
display: block;
|
|
width: 100%;
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.create-account-button {
|
|
color: #fff;
|
|
background-color: rgba(255, 255, 255, 0.25);
|
|
|
|
&:hover {
|
|
background-color: rgba(255, 255, 255, 0.28);
|
|
}
|
|
}
|
|
|
|
.menu-block,
|
|
.footer-block {
|
|
margin-bottom: 15px;
|
|
|
|
.block-title {
|
|
@include ellipsis;
|
|
@include margin-left(26px);
|
|
@include margin-right(30px);
|
|
|
|
text-transform: uppercase;
|
|
font-weight: $font-bold; // Bold
|
|
font-size: 13px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
a {
|
|
min-height: 40px;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.footer-bottom {
|
|
padding: 0 $menu-lateral-padding;
|
|
}
|
|
|
|
.footer-links {
|
|
> div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
a,
|
|
span[role=button] {
|
|
@include margin-right(8px);
|
|
@include disable-default-a-behaviour;
|
|
|
|
color: pvar(--menuForegroundColor);
|
|
opacity: $footer-links-base-opacity;
|
|
white-space: nowrap;
|
|
font-size: 0.75rem;
|
|
line-height: 1.4rem;
|
|
font-weight: $font-semibold;
|
|
|
|
&:hover {
|
|
opacity: $footer-links-base-opacity + .2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer-copyleft a {
|
|
@include disable-default-a-behaviour;
|
|
|
|
color: pvar(--menuForegroundColor);
|
|
opacity: $footer-links-base-opacity - .2;
|
|
font-size: 0.85rem;
|
|
|
|
&:hover {
|
|
opacity: $footer-links-base-opacity;
|
|
}
|
|
}
|
|
|
|
.dropdown {
|
|
z-index: #{z('menu') + 1} !important;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
width: calc(100% + 40px);
|
|
|
|
// Prevent weird display issue on firefox when global style is not loaded yet
|
|
&:not(.show) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.dropdown-item {
|
|
@include dropdown-with-icon-item;
|
|
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&:hover {
|
|
.hover-display-toggle {
|
|
display: none;
|
|
}
|
|
|
|
.hover-display-toggle[hidden] {
|
|
display: inherit !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.more-settings {
|
|
text-transform: uppercase;
|
|
font-size: 80%;
|
|
color: #6c757d;
|
|
}
|
|
|
|
@media screen and (max-width: $mobile-view) {
|
|
.menu-wrapper {
|
|
width: 100% !important;
|
|
|
|
menu {
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
.top-menu,
|
|
.footer {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
width: calc(100vw - 30px);
|
|
}
|
|
}
|
|
|
|
my-global-icon {
|
|
position: relative;
|
|
top: -1px;
|
|
|
|
.playlist-icon {
|
|
@include margin-right(16px);
|
|
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
|
|
&.channel-icon {
|
|
top: -2px;
|
|
}
|
|
}
|