mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-27 20:51:57 +00:00
Some further dark-mode fixes, added toggle to homepage
- Homepage toggle especially useful for not-logged-in users since they do not have a dropdown.
This commit is contained in:
parent
b80b6ed942
commit
88dfb40c63
@ -167,8 +167,8 @@ header .search-box {
|
|||||||
|
|
||||||
@include smaller-than($l) {
|
@include smaller-than($l) {
|
||||||
header .header-links {
|
header .header-links {
|
||||||
|
@include lightDark(background-color, #fff, #333);
|
||||||
display: none;
|
display: none;
|
||||||
background-color: #FFF;
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
right: $-m;
|
right: $-m;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
@ -180,19 +180,18 @@ header .search-box {
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
header .links a, header .dropdown-container ul li a {
|
header .links a, header .dropdown-container ul li a, header .dropdown-container ul li button {
|
||||||
text-align: start;
|
text-align: start;
|
||||||
display: block;
|
display: block;
|
||||||
padding: $-s $-m;
|
padding: $-s $-m;
|
||||||
color: $text-dark;
|
color: $text-dark;
|
||||||
fill: $text-dark;
|
@include lightDark(color, $text-dark, #eee);
|
||||||
svg {
|
svg {
|
||||||
margin-inline-end: $-s;
|
margin-inline-end: $-s;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #EEE;
|
@include lightDark(background-color, #eee, #333);
|
||||||
color: #444;
|
@include lightDark(color, #000, #fff);
|
||||||
fill: #444;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -581,6 +581,8 @@ ul.pagination {
|
|||||||
@include lightDark(color, #555, #eee);
|
@include lightDark(color, #555, #eee);
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
line-height: 1.6;
|
||||||
|
cursor: pointer;
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: var(--color-primary-light);
|
background-color: var(--color-primary-light);
|
||||||
|
@ -72,15 +72,7 @@
|
|||||||
</li>
|
</li>
|
||||||
<li><hr></li>
|
<li><hr></li>
|
||||||
<li>
|
<li>
|
||||||
<form action="{{ url('/settings/users/toggle-dark-mode') }}" method="post">
|
@include('partials.dark-mode-toggle')
|
||||||
{{ csrf_field() }}
|
|
||||||
{{ method_field('patch') }}
|
|
||||||
@if(setting()->getForCurrentUser('dark-mode-enabled'))
|
|
||||||
<button>@icon('light-mode'){{ trans('common.light_mode') }}</button>
|
|
||||||
@else
|
|
||||||
<button>@icon('dark-mode'){{ trans('common.dark_mode') }}</button>
|
|
||||||
@endif
|
|
||||||
</form>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
@ -14,6 +14,7 @@
|
|||||||
<div class="icon-list text-primary">
|
<div class="icon-list text-primary">
|
||||||
@include('partials.view-toggle', ['view' => $view, 'type' => 'books'])
|
@include('partials.view-toggle', ['view' => $view, 'type' => 'books'])
|
||||||
@include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
|
@include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
|
||||||
|
@include('partials.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-primary'])
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@stop
|
@stop
|
@ -19,6 +19,7 @@
|
|||||||
<h5>{{ trans('common.actions') }}</h5>
|
<h5>{{ trans('common.actions') }}</h5>
|
||||||
<div class="icon-list text-primary">
|
<div class="icon-list text-primary">
|
||||||
@include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
|
@include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
|
||||||
|
@include('partials.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-primary'])
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@stop
|
@stop
|
@ -14,6 +14,7 @@
|
|||||||
<div class="icon-list text-primary">
|
<div class="icon-list text-primary">
|
||||||
@include('partials.view-toggle', ['view' => $view, 'type' => 'shelves'])
|
@include('partials.view-toggle', ['view' => $view, 'type' => 'shelves'])
|
||||||
@include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
|
@include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
|
||||||
|
@include('partials.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-primary'])
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@stop
|
@stop
|
@ -3,10 +3,19 @@
|
|||||||
@section('body')
|
@section('body')
|
||||||
|
|
||||||
<div class="container px-xl py-s">
|
<div class="container px-xl py-s">
|
||||||
|
<div class="grid half">
|
||||||
|
<div>
|
||||||
<div class="icon-list inline block">
|
<div class="icon-list inline block">
|
||||||
@include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
|
@include('components.expand-toggle', ['target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="text-m-right">
|
||||||
|
<div class="icon-list inline block">
|
||||||
|
@include('partials.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-primary'])
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="container" id="home-default">
|
<div class="container" id="home-default">
|
||||||
<div class="grid third gap-xxl no-row-gap" >
|
<div class="grid third gap-xxl no-row-gap" >
|
||||||
|
9
resources/views/partials/dark-mode-toggle.blade.php
Normal file
9
resources/views/partials/dark-mode-toggle.blade.php
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<form action="{{ url('/settings/users/toggle-dark-mode') }}" method="post">
|
||||||
|
{{ csrf_field() }}
|
||||||
|
{{ method_field('patch') }}
|
||||||
|
@if(setting()->getForCurrentUser('dark-mode-enabled'))
|
||||||
|
<button class="{{ $classes ?? '' }}"><span>@icon('light-mode')</span><span>{{ trans('common.light_mode') }}</span></button>
|
||||||
|
@else
|
||||||
|
<button class="{{ $classes ?? '' }}"><span>@icon('dark-mode')</span><span>{{ trans('common.dark_mode') }}</span></button>
|
||||||
|
@endif
|
||||||
|
</form>
|
Loading…
Reference in New Issue
Block a user