Tweaked entity color palette for accessibility

Also converted entity colors to CSS variables for easier
instance customization.

Related to #1320
This commit is contained in:
Dan Brown 2019-08-26 14:37:53 +01:00
parent 64abe10dc4
commit 5979f6667b
No known key found for this signature in database
GPG key ID: 46D9F943C24A2EF9
6 changed files with 44 additions and 41 deletions

View file

@ -168,11 +168,6 @@
}
}
.bookshelf-grid-item .grid-card-content h2 a {
color: $color-bookshelf;
fill: $color-bookshelf;
}
.book-grid-item .grid-card-footer {
p.small {
font-size: .8em;

View file

@ -44,24 +44,24 @@
* Entity text colors
*/
.text-bookshelf, .text-bookshelf:hover {
color: $color-bookshelf;
fill: $color-bookshelf;
color: var(--color-bookshelf);
fill: var(--color-bookshelf);
}
.text-book, .text-book:hover {
color: $color-book;
fill: $color-book;
color: var(--color-book);
fill: var(--color-book);
}
.text-page, .text-page:hover {
color: $color-page;
fill: $color-page;
color: var(--color-page);
fill: var(--color-page);
}
.text-page.draft, .text-page.draft:hover {
color: $color-page-draft;
fill: $color-page-draft;
color: var(--color-page-draft);
fill: var(--color-page-draft);
}
.text-chapter, .text-chapter:hover {
color: $color-chapter;
fill: $color-chapter;
color: var(--color-chapter);
fill: var(--color-chapter);
}
/*
@ -71,11 +71,11 @@
background-color: #FFFFFF;
}
.bg-book {
background-color: $color-book;
background-color: var(--color-book);
}
.bg-chapter {
background-color: $color-chapter;
background-color: var(--color-chapter);
}
.bg-shelf {
background-color: $color-bookshelf;
background-color: var(--color-bookshelf);
}

View file

@ -232,9 +232,20 @@
}
.sort-box {
margin-bottom: $-m;
border: 2px solid rgba($color-book, 0.6);
padding: $-m $-xl;
border-radius: 4px;
position: relative;
&::before {
content: '';
border-radius: 4px;
opacity: 0.5;
border: 2px solid var(--color-book);
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
}
.sort-box-options {
display: flex;
@ -266,12 +277,9 @@
border: 1px solid #DDD;
margin-top: -1px;
min-height: 38px;
&.text-chapter {
border-left: 2px solid $color-chapter;
}
&.text-page {
border-left: 2px solid $color-page;
}
}
li.text-page, li.text-chapter {
border-left: 2px solid currentColor;
}
li:first-child {
margin-top: $-xs;
@ -361,8 +369,8 @@ ul.pagination {
margin-top: 0;
}
.page.draft .text-page {
color: $color-page-draft;
fill: $color-page-draft;
color: var(--color-page-draft);
fill: var(--color-page-draft);
}
> .dropdown-container {
display: block;

View file

@ -42,21 +42,21 @@ $fs-s: 12px;
// Colours
:root {
--color-primary: '#206ea7';
--color-primary-light: 'rgba(32,110,167,0.15)';
--color-primary: #206ea7;
--color-primary-light: rgba(32,110,167,0.15);
--color-page: #206ea7;
--color-page-draft: #7e50b1;
--color-chapter: #af4d0d;
--color-book: #077b70;
--color-bookshelf: #a94747;
}
$positive: #0f7d15;
$negative: #ab0f0e;
$info: #0288D1;
$warning: #cf4d03;
// Item Colors
$color-bookshelf: #af5a5a;
$color-book: #009688;
$color-chapter: #d7804a;
$color-page: #206ea7;
$color-page-draft: #9A60DA;
// Text colours
$text-dark: #444;
$text-light: #EEE;

View file

@ -75,17 +75,17 @@ $loadingSize: 10px;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.62, .28, .23, .99);
margin-right: 4px;
background-color: $color-page;
background-color: var(--color-page);
animation-delay: 0.3s;
}
> div:first-child {
left: -($loadingSize+$-xs);
background-color: $color-book;
background-color: var(--color-book);
animation-delay: 0s;
}
> div:last-of-type {
left: $loadingSize+$-xs;
background-color: $color-chapter;
background-color: var(--color-chapter);
animation-delay: 0.6s;
}
> span {

View file

@ -1,4 +1,4 @@
<div dropdown class="dropdown-container" >
<div dropdown class="dropdown-container" id="export-menu">
<div dropdown-toggle class="icon-list-item"
aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('entities.export') }}" tabindex="0">
<span>@icon('export')</span>