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.

resources/assets/sass/_blocks.scss

@@ -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;

resources/assets/sass/_components.scss

@@ -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);

resources/assets/sass/_forms.scss

@@ -370,6 +370,8 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
   }
 }
 
+
 .image-picker img {
   background-color: #BBB;
+  max-width: 100%;
 }

resources/assets/sass/_pages.scss

@@ -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;

resources/assets/sass/_tinymce.scss

@@ -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;

resources/assets/sass/_variables.scss

@@ -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);

resources/views/common/home.blade.php

@@ -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>

resources/views/partials/entity-list.blade.php

@@ -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