mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-03-14 22:45:16 +08:00
Tweaked colors for accessibility, applied fixes found during testing
- Fixed overriding h3 content header style. - Updated notification styling to be less overwhelming. - Increased floated image margin. - Adjusted callout icon placement. - Fixed tinymce fullscreen zindex issue.
This commit is contained in:
Dan Brown
parent
ba09dad1fe
commit
7a8678e5f7
@ -14,7 +14,7 @@
|
||||
content: '';
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
left: $-xs + 1px;
|
||||
left: $-xs + 2px;
|
||||
top: 50%;
|
||||
margin-top: -9px;
|
||||
display: inline-block;
|
||||
@ -24,7 +24,7 @@
|
||||
}
|
||||
&.success {
|
||||
border-left-color: $positive;
|
||||
background-color: lighten($positive, 45%);
|
||||
background-color: lighten($positive, 68%);
|
||||
color: darken($positive, 16%);
|
||||
}
|
||||
&.success:before {
|
||||
@ -32,7 +32,7 @@
|
||||
}
|
||||
&.danger {
|
||||
border-left-color: $negative;
|
||||
background-color: lighten($negative, 34%);
|
||||
background-color: lighten($negative, 56%);
|
||||
color: darken($negative, 20%);
|
||||
}
|
||||
&.danger:before {
|
||||
@ -41,12 +41,12 @@
|
||||
&.info {
|
||||
border-left-color: $info;
|
||||
background-color: lighten($info, 50%);
|
||||
color: darken($info, 16%);
|
||||
color: darken($info, 20%);
|
||||
}
|
||||
&.warning {
|
||||
border-left-color: $warning;
|
||||
background-color: lighten($warning, 36%);
|
||||
color: darken($warning, 16%);
|
||||
background-color: lighten($warning, 50%);
|
||||
color: darken($warning, 20%);
|
||||
}
|
||||
&.warning:before {
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
|
||||
@ -62,17 +62,6 @@
|
||||
box-shadow: $bs-card;
|
||||
border-radius: 3px;
|
||||
border: 1px solid transparent;
|
||||
h3 {
|
||||
padding: $-m $-m $-xs;
|
||||
margin: 0;
|
||||
font-size: $fs-m;
|
||||
color: #222;
|
||||
fill: #222;
|
||||
font-weight: 400;
|
||||
}
|
||||
h3 a {
|
||||
line-height: 1;
|
||||
}
|
||||
.body, p.empty-text {
|
||||
padding: $-m;
|
||||
}
|
||||
@ -82,6 +71,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
padding: $-m $-m $-xs;
|
||||
margin: 0;
|
||||
font-size: $fs-m;
|
||||
color: #222;
|
||||
fill: #222;
|
||||
font-weight: 400;
|
||||
}
|
||||
.card-title a {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.card.drag-card {
|
||||
border: 1px solid #DDD;
|
||||
border-radius: 4px;
|
||||
|
||||
@ -3,11 +3,12 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: $-xl*2 $-xl;
|
||||
margin: $-xl;
|
||||
padding: $-m $-l;
|
||||
background-color: #EEE;
|
||||
border-radius: 3px;
|
||||
box-shadow: $bs-card;
|
||||
background-color: #FFF;
|
||||
border-radius: 4px;
|
||||
border-left: 6px solid currentColor;
|
||||
box-shadow: $bs-large;
|
||||
z-index: 999999;
|
||||
cursor: pointer;
|
||||
max-width: 360px;
|
||||
@ -15,30 +16,31 @@
|
||||
transform: translateX(580px);
|
||||
display: grid;
|
||||
grid-template-columns: 42px 1fr;
|
||||
color: #FFF;
|
||||
color: #444;
|
||||
font-weight: 700;
|
||||
span, svg {
|
||||
vertical-align: middle;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
svg {
|
||||
fill: #EEEEEE;
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
padding-right: $-s;
|
||||
fill: currentColor;
|
||||
}
|
||||
span {
|
||||
vertical-align: middle;
|
||||
line-height: 1.3;
|
||||
}
|
||||
&.pos {
|
||||
background-color: $positive;
|
||||
color: $positive;
|
||||
}
|
||||
&.neg {
|
||||
background-color: $negative;
|
||||
color: $negative;
|
||||
}
|
||||
&.warning {
|
||||
background-color: $secondary;
|
||||
color: $warning;
|
||||
}
|
||||
&.showing {
|
||||
transform: translateX(0);
|
||||
|
||||
@ -370,6 +370,8 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.image-picker img {
|
||||
background-color: #BBB;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
.edit-area {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.mce-tinymce {
|
||||
@ -24,7 +24,7 @@
|
||||
.page-edit-toolbar {
|
||||
overflow-x: scroll;
|
||||
overflow-y: visible;
|
||||
z-index: 4;
|
||||
z-index: 12;
|
||||
}
|
||||
.page-edit-toolbar .grid.third {
|
||||
display: block;
|
||||
@ -80,7 +80,7 @@
|
||||
}
|
||||
img.align-left, table.align-left {
|
||||
float: left !important;
|
||||
margin: $-xs $-s $-xs 0;
|
||||
margin: $-xs $-m $-m 0;
|
||||
}
|
||||
.align-right {
|
||||
text-align: right !important;
|
||||
|
||||
@ -57,6 +57,10 @@
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.page-content.mce-content-body {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
// Fix to prevent 'No color' option from not being clickable.
|
||||
.mce-colorbtn-trans {
|
||||
overflow: hidden;
|
||||
|
||||
@ -43,9 +43,9 @@ $fs-s: 12px;
|
||||
// Colours
|
||||
$primary: #0288D1;
|
||||
$primary-dark: #0288D1;
|
||||
$secondary: #e27b41;
|
||||
$positive: #52A256;
|
||||
$negative: #E84F4F;
|
||||
$secondary: #cf4d03;
|
||||
$positive: #0f7d15;
|
||||
$negative: #ab0f0e;
|
||||
$info: $primary;
|
||||
$warning: $secondary;
|
||||
$primary-faded: rgba(21, 101, 192, 0.15);
|
||||
@ -64,5 +64,6 @@ $text-light: #EEE;
|
||||
// Shadows
|
||||
$bs-light: 0 0 4px 1px #CCC;
|
||||
$bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26);
|
||||
$bs-large: 0 1px 6px 1px rgba(22, 22, 22, 0.2);
|
||||
$bs-card: 0 1px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
$bs-hover: 0 2px 2px 1px rgba(0,0,0,.13);
|
||||
@ -13,7 +13,7 @@
|
||||
<div>
|
||||
@if(count($draftPages) > 0)
|
||||
<div id="recent-drafts" class="card mb-xl">
|
||||
<h3>{{ trans('entities.my_recent_drafts') }}</h3>
|
||||
<h3 class="card-title">{{ trans('entities.my_recent_drafts') }}</h3>
|
||||
<div class="px-m">
|
||||
@include('partials.entity-list', ['entities' => $draftPages, 'style' => 'compact'])
|
||||
</div>
|
||||
@ -21,7 +21,7 @@
|
||||
@endif
|
||||
|
||||
<div id="{{ $signedIn ? 'recently-viewed' : 'recent-books' }}" class="card mb-xl">
|
||||
<h3>{{ trans('entities.' . ($signedIn ? 'my_recently_viewed' : 'books_recent')) }}</h3>
|
||||
<h3 class="card-title">{{ trans('entities.' . ($signedIn ? 'my_recently_viewed' : 'books_recent')) }}</h3>
|
||||
<div class="px-m">
|
||||
@include('partials.entity-list', [
|
||||
'entities' => $recents,
|
||||
@ -34,7 +34,7 @@
|
||||
|
||||
<div>
|
||||
<div id="recent-pages" class="card mb-xl">
|
||||
<h3><a class="no-color" href="{{ baseUrl("/pages/recently-updated") }}">{{ trans('entities.recently_updated_pages') }}</a></h3>
|
||||
<h3 class="card-title"><a class="no-color" href="{{ baseUrl("/pages/recently-updated") }}">{{ trans('entities.recently_updated_pages') }}</a></h3>
|
||||
<div id="recently-updated-pages" class="px-m">
|
||||
@include('partials.entity-list', [
|
||||
'entities' => $recentlyUpdatedPages,
|
||||
@ -48,7 +48,7 @@
|
||||
<div>
|
||||
<div id="recent-activity">
|
||||
<div class="card mb-xl">
|
||||
<h3>{{ trans('entities.recent_activity') }}</h3>
|
||||
<h3 class="card-title">{{ trans('entities.recent_activity') }}</h3>
|
||||
@include('partials.activity-list', ['activity' => $activity])
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
|
||||
<div class="entity-list {{ $style ?? '' }}">
|
||||
@if(count($entities) > 0)
|
||||
@if(count($entities) > 0)
|
||||
<div class="entity-list {{ $style ?? '' }}">
|
||||
@foreach($entities as $index => $entity)
|
||||
@include('partials.entity-list-item', ['entity' => $entity, 'showPath' => $showPath ?? false])
|
||||
@endforeach
|
||||
@else
|
||||
<p class="text-muted empty-text">
|
||||
{{ $emptyText ?? trans('common.no_items') }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<p class="text-muted empty-text">
|
||||
{{ $emptyText ?? trans('common.no_items') }}
|
||||
</p>
|
||||
@endif
|
||||
Loading…
x
Reference in New Issue
Block a user