mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-25 03:35:35 +00:00
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:
parent
64abe10dc4
commit
5979f6667b
@ -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;
|
||||
|
@ -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);
|
||||
}
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user