Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Cleaned up dark mode styles inc. setting browser color scheme

Browse Source 
Forces browser colorscheme based on BookStack color scheme, via
'color-scheme' css property.
Sets proper dark mode colors for some previously missed areas like
templates and attachment control buttons.
Also fixed search bar icon position for some search inputs.
This commit is contained in:
Dan Brown 2022-11-28 12:38:30 +00:00
parent b786ed07be
commit 09fa2d2c9c
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
6 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
resources/sass/_blocks.scss
View File

@ -109,7 +109,8 @@
}
.card.border-card {
border: 1px solid #DDD;
border: 1px solid;
@include lightDark(border-color, #ddd, #000);
}
.card.drag-card {
@ -133,7 +134,7 @@
flex-grow: 0;
padding: 0 $-xs;
&:hover {
background-color: #EEE;
@include lightDark(background-color, #eee, #2d2d2d);
}
.svg-icon {
margin-inline-end: 0px;

8
resources/sass/_components.scss
View File

@ -812,14 +812,16 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
height: 100%;
display: flex;
flex-direction: column;
border-inline-start: 1px solid #DDD;
border-inline-start: 1px solid;
@include lightDark(border-color, #ddd, #000);
}
.template-item-actions button {
cursor: pointer;
flex: 1;
background: #FFF;
@include lightDark(background-color, #FFF, #222);
border: 0;
border-top: 1px solid #DDD;
border-top: 1px solid;
@include lightDark(border-color, #DDD, #000);
}
.template-item-actions button svg {
margin: 0;

3
resources/sass/_lists.scss
View File

@ -284,7 +284,8 @@
padding-inline-start: $-m;
}
li {
border: 1px solid #DDD;
border: 1px solid;
@include lightDark(border-color, #DDD, #666);
margin-top: -1px;
min-height: 38px;
}

4
resources/sass/_variables.scss
View File

@ -51,6 +51,10 @@ $fs-s: 12px;
:root.dark-mode {
--bg-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='19' height='19' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(143)'%3E%3Crect width='100%25' height='100%25' fill='rgba(42, 67, 101,0)'/%3E%3Cpath d='M-10 30h60v20h-60zM-10-10h60v20h-60' fill='rgba(26, 32, 44,0)'/%3E%3Cpath d='M-10 10h60v20h-60zM-10-30h60v20h-60z' fill='rgba(255, 255, 255,0.05)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E");
color-scheme: only dark;
}
:root:not(.dark-mode) {
color-scheme: only light;
}
$positive: #0f7d15;

2
resources/views/entities/search-form.blade.php
View File

@ -5,6 +5,6 @@
<form refs="entity-search@searchForm" class="search-box flexible" role="search">
<input refs="entity-search@searchInput" type="text"
aria-label="{{ $label }}" name="term" placeholder="{{ $label }}">
<button type="submit" aria-label="{{ trans('common.search') }}">@icon('search')</button>
<button tabindex="-1" type="submit" aria-label="{{ trans('common.search') }}">@icon('search')</button>
</form>
</div>

2
resources/views/pages/parts/template-manager.blade.php
View File

@ -13,7 +13,7 @@
<div class="search-box flexible mb-m" style="display: {{ count($templates) > 0 ? 'block' : 'none' }}">
<input refs="template-manager@searchInput" type="text" name="template-search" placeholder="{{ trans('common.search') }}">
<button refs="template-manager@searchButton" type="button">@icon('search')</button>
<button refs="template-manager@searchButton" tabindex="-1" type="button">@icon('search')</button>
<button refs="template-manager@searchCancel" class="search-box-cancel text-neg" type="button" style="display: none">@icon('close')</button>
</div>