mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 12:16:07 +00:00
Refined header bar styles
- Updated many items to be flexbox-based. - Updated & aligned hover states across header bar items.
This commit is contained in:
parent
340c9ec7a1
commit
4866a3a198
@ -21,19 +21,28 @@ header {
|
|||||||
color: rgb(250, 250, 250);
|
color: rgb(250, 250, 250);
|
||||||
border-bottom: 1px solid #DDD;
|
border-bottom: 1px solid #DDD;
|
||||||
box-shadow: $bs-card;
|
box-shadow: $bs-card;
|
||||||
padding: $-xxs 0;
|
|
||||||
@include lightDark(border-bottom-color, #DDD, #000);
|
@include lightDark(border-bottom-color, #DDD, #000);
|
||||||
@include whenDark {
|
@include whenDark {
|
||||||
filter: saturate(0.8) brightness(0.8);
|
filter: saturate(0.8) brightness(0.8);
|
||||||
}
|
}
|
||||||
|
.header-links {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
.links {
|
.links {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
.links a {
|
.links a {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: $-m;
|
padding: 10px $-m;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.links a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: rgba(255, 255, 255, .15);
|
||||||
}
|
}
|
||||||
.dropdown-container {
|
.dropdown-container {
|
||||||
padding-inline-start: $-m;
|
padding-inline-start: $-m;
|
||||||
@ -49,19 +58,25 @@ header {
|
|||||||
.user-name {
|
.user-name {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
> * {
|
padding: $-s;
|
||||||
vertical-align: top;
|
margin: 0 (-$-s);
|
||||||
}
|
border-radius: 3px;
|
||||||
|
gap: $-xs;
|
||||||
> span {
|
> span {
|
||||||
padding-inline-start: $-xs;
|
padding-inline-start: $-xs;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-top: $-xxs;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
> svg {
|
> svg {
|
||||||
padding-top: 4px;
|
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
margin-top: -2px;
|
||||||
|
margin-inline-end: 0;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.15);
|
||||||
}
|
}
|
||||||
@include between($l, $xl) {
|
@include between($l, $xl) {
|
||||||
padding-inline-start: $-xs;
|
padding-inline-start: $-xs;
|
||||||
@ -79,7 +94,6 @@ header {
|
|||||||
|
|
||||||
header .search-box {
|
header .search-box {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: 10px;
|
|
||||||
input {
|
input {
|
||||||
background-color: rgba(0, 0, 0, 0.2);
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
@ -91,12 +105,15 @@ header .search-box {
|
|||||||
padding-inline-start: 40px;
|
padding-inline-start: 40px;
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
left: 16px;
|
left: 16px;
|
||||||
|
top: 10px;
|
||||||
|
color: #FFF;
|
||||||
|
opacity: 0.6;
|
||||||
@include lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
|
@include lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
|
||||||
@include rtl {
|
@include rtl {
|
||||||
left: auto;
|
left: auto;
|
||||||
@ -106,36 +123,39 @@ header .search-box {
|
|||||||
margin-block-end: 0;
|
margin-block-end: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
input::placeholder {
|
||||||
color: #DDD;
|
color: #FFF;
|
||||||
}
|
opacity: 0.6;
|
||||||
::-moz-placeholder { /* Firefox 19+ */
|
|
||||||
color: #DDD;
|
|
||||||
}
|
}
|
||||||
@include between($l, $xl) {
|
@include between($l, $xl) {
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
}
|
}
|
||||||
|
&:focus-within button {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
|
padding: ($-s - 6px) $-s;
|
||||||
|
margin: 6px (-$-s);
|
||||||
|
gap: $-s;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 4px;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
background-color: rgba(255, 255, 255, .15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-text {
|
.logo-text {
|
||||||
display: inline-block;
|
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@include padding(14px, $-l, 14px, 0);
|
|
||||||
vertical-align: top;
|
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
.logo-image {
|
.logo-image {
|
||||||
@include margin($-xs, $-s, $-xs, 0);
|
|
||||||
vertical-align: top;
|
|
||||||
height: 43px;
|
height: 43px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -17,7 +17,7 @@
|
|||||||
class="mobile-menu-toggle hide-over-l">@icon('more')</button>
|
class="mobile-menu-toggle hide-over-l">@icon('more')</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex-container-row justify-center hide-under-l">
|
<div class="flex-container-column items-center justify-center hide-under-l">
|
||||||
@if (hasAppAccess())
|
@if (hasAppAccess())
|
||||||
<form action="{{ url('/search') }}" method="GET" class="search-box" role="search">
|
<form action="{{ url('/search') }}" method="GET" class="search-box" role="search">
|
||||||
<button id="header-search-box-button" type="submit" aria-label="{{ trans('common.search') }}" tabindex="-1">@icon('search') </button>
|
<button id="header-search-box-button" type="submit" aria-label="{{ trans('common.search') }}" tabindex="-1">@icon('search') </button>
|
||||||
@ -28,76 +28,74 @@
|
|||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-right">
|
<nav refs="header-mobile-toggle@menu" class="header-links">
|
||||||
<nav refs="header-mobile-toggle@menu" class="header-links">
|
<div class="links text-center">
|
||||||
<div class="links text-center">
|
@if (hasAppAccess())
|
||||||
@if (hasAppAccess())
|
<a class="hide-over-l" href="{{ url('/search') }}">@icon('search'){{ trans('common.search') }}</a>
|
||||||
<a class="hide-over-l" href="{{ url('/search') }}">@icon('search'){{ trans('common.search') }}</a>
|
@if(userCanOnAny('view', \BookStack\Entities\Models\Bookshelf::class) || userCan('bookshelf-view-all') || userCan('bookshelf-view-own'))
|
||||||
@if(userCanOnAny('view', \BookStack\Entities\Models\Bookshelf::class) || userCan('bookshelf-view-all') || userCan('bookshelf-view-own'))
|
<a href="{{ url('/shelves') }}">@icon('bookshelf'){{ trans('entities.shelves') }}</a>
|
||||||
<a href="{{ url('/shelves') }}">@icon('bookshelf'){{ trans('entities.shelves') }}</a>
|
|
||||||
@endif
|
|
||||||
<a href="{{ url('/books') }}">@icon('books'){{ trans('entities.books') }}</a>
|
|
||||||
@if(signedInUser() && userCan('settings-manage'))
|
|
||||||
<a href="{{ url('/settings') }}">@icon('settings'){{ trans('settings.settings') }}</a>
|
|
||||||
@endif
|
|
||||||
@if(signedInUser() && userCan('users-manage') && !userCan('settings-manage'))
|
|
||||||
<a href="{{ url('/settings/users') }}">@icon('users'){{ trans('settings.users') }}</a>
|
|
||||||
@endif
|
|
||||||
@endif
|
@endif
|
||||||
|
<a href="{{ url('/books') }}">@icon('books'){{ trans('entities.books') }}</a>
|
||||||
|
@if(signedInUser() && userCan('settings-manage'))
|
||||||
|
<a href="{{ url('/settings') }}">@icon('settings'){{ trans('settings.settings') }}</a>
|
||||||
|
@endif
|
||||||
|
@if(signedInUser() && userCan('users-manage') && !userCan('settings-manage'))
|
||||||
|
<a href="{{ url('/settings/users') }}">@icon('users'){{ trans('settings.users') }}</a>
|
||||||
|
@endif
|
||||||
|
@endif
|
||||||
|
|
||||||
@if(!signedInUser())
|
@if(!signedInUser())
|
||||||
@if(setting('registration-enabled') && config('auth.method') === 'standard')
|
@if(setting('registration-enabled') && config('auth.method') === 'standard')
|
||||||
<a href="{{ url('/register') }}">@icon('new-user'){{ trans('auth.sign_up') }}</a>
|
<a href="{{ url('/register') }}">@icon('new-user'){{ trans('auth.sign_up') }}</a>
|
||||||
@endif
|
|
||||||
<a href="{{ url('/login') }}">@icon('login'){{ trans('auth.log_in') }}</a>
|
|
||||||
@endif
|
@endif
|
||||||
</div>
|
<a href="{{ url('/login') }}">@icon('login'){{ trans('auth.log_in') }}</a>
|
||||||
@if(signedInUser())
|
@endif
|
||||||
<?php $currentUser = user(); ?>
|
</div>
|
||||||
<div class="dropdown-container" component="dropdown" option:dropdown:bubble-escapes="true">
|
@if(signedInUser())
|
||||||
|
<?php $currentUser = user(); ?>
|
||||||
|
<div class="dropdown-container" component="dropdown" option:dropdown:bubble-escapes="true">
|
||||||
<span class="user-name py-s hide-under-l" refs="dropdown@toggle"
|
<span class="user-name py-s hide-under-l" refs="dropdown@toggle"
|
||||||
aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.profile_menu') }}" tabindex="0">
|
aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.profile_menu') }}" tabindex="0">
|
||||||
<img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
|
<img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
|
||||||
<span class="name">{{ $currentUser->getShortName(9) }}</span> @icon('caret-down')
|
<span class="name">{{ $currentUser->getShortName(9) }}</span> @icon('caret-down')
|
||||||
</span>
|
</span>
|
||||||
<ul refs="dropdown@menu" class="dropdown-menu" role="menu">
|
<ul refs="dropdown@menu" class="dropdown-menu" role="menu">
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ url('/favourites') }}" class="icon-item">
|
<a href="{{ url('/favourites') }}" class="icon-item">
|
||||||
@icon('star')
|
@icon('star')
|
||||||
<div>{{ trans('entities.my_favourites') }}</div>
|
<div>{{ trans('entities.my_favourites') }}</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ $currentUser->getProfileUrl() }}" class="icon-item">
|
<a href="{{ $currentUser->getProfileUrl() }}" class="icon-item">
|
||||||
@icon('user')
|
@icon('user')
|
||||||
<div>{{ trans('common.view_profile') }}</div>
|
<div>{{ trans('common.view_profile') }}</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ $currentUser->getEditUrl() }}" class="icon-item">
|
<a href="{{ $currentUser->getEditUrl() }}" class="icon-item">
|
||||||
@icon('edit')
|
@icon('edit')
|
||||||
<div>{{ trans('common.edit_profile') }}</div>
|
<div>{{ trans('common.edit_profile') }}</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<form action="{{ url(config('auth.method') === 'saml2' ? '/saml2/logout' : '/logout') }}"
|
<form action="{{ url(config('auth.method') === 'saml2' ? '/saml2/logout' : '/logout') }}"
|
||||||
method="post">
|
method="post">
|
||||||
{{ csrf_field() }}
|
{{ csrf_field() }}
|
||||||
<button class="icon-item">
|
<button class="icon-item">
|
||||||
@icon('logout')
|
@icon('logout')
|
||||||
<div>{{ trans('auth.logout') }}</div>
|
<div>{{ trans('auth.logout') }}</div>
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</li>
|
</li>
|
||||||
<li><hr></li>
|
<li><hr></li>
|
||||||
<li>
|
<li>
|
||||||
@include('common.dark-mode-toggle', ['classes' => 'icon-item'])
|
@include('common.dark-mode-toggle', ['classes' => 'icon-item'])
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
Loading…
Reference in New Issue
Block a user