1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-29 23:22:34 +01:00

Rolled out use of seperate link color style

This commit is contained in:
Dan Brown 2023-01-28 16:06:11 +00:00
parent 65ebdb7234
commit c337439370
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
41 changed files with 71 additions and 64 deletions

View File

@ -3,6 +3,7 @@ import {Component} from "./component";
export class SettingAppColorPicker extends Component {
setup() {
// TODO
this.colorInput = this.$refs.input;
this.lightColorInput = this.$refs.lightInput;

View File

@ -42,6 +42,8 @@ export class Tabs extends Component {
const selected = tabSection === sectionId;
tab.setAttribute('aria-selected', selected ? 'true' : 'false');
}
this.$emit('change', {section: sectionId});
}
}

View File

@ -53,7 +53,7 @@ return [
'color_scheme_desc' => 'Set the colors to use in the BookStack interface. Colors can be configured separately for dark and light mode to best fit the theme and ensure legibility.',
'ui_colors_desc' => 'Set the primary and link colors used in BookStack. The primary color is mainly used for the header banner, buttons and UI decorations, in addition to a few other components.',
'app_color' => 'Primary Color',
'link_color' => 'Link Color',
'link_color' => 'Default Link Color',
'content_colors_desc' => 'Set colors for all elements in the page organisation hierarchy. Choosing colors with a similar brightness to the default colors is recommended for readability.',
'bookshelf_color' => 'Shelf Color',
'book_color' => 'Book Color',

View File

@ -25,7 +25,6 @@ button {
text-transform: uppercase;
border: 1px solid var(--color-primary);
vertical-align: top;
@include lightDark(filter, none, saturate(0.8) brightness(0.8));
&:hover, &:focus, &:active {
background-color: var(--color-primary);
text-decoration: none;
@ -85,10 +84,7 @@ button {
user-select: none;
font-size: 0.75rem;
line-height: 1.4em;
color: var(--color-primary);
@include whenDark {
color: #AAA;
}
color: var(--color-link);
&:active {
outline: 0;
}
@ -96,8 +92,8 @@ button {
text-decoration: none;
}
&:hover, &:focus {
color: var(--color-primary);
fill: var(--color-primary);
color: var(--color-link);
fill: var(--color-link);
}
}
.text-button.hover-underline:hover {

View File

@ -9,11 +9,14 @@
background-color: var(--color-primary-light);
@include whenDark {
background: #000;
.text-primary {
.text-link {
color: #AAA !important;
}
}
}
.link-background {
background-color: var(--color-link) !important;
}
/*
* Status text colors
@ -41,6 +44,11 @@
fill: var(--color-primary) !important;
}
.text-link, .text-link:hover, .text-link-hover:hover {
color: var(--color-link) !important;
fill: var(--color-link) !important;
}
.text-muted {
@include lightDark(color, #575757, #888888, true);
fill: currentColor !important;

View File

@ -626,8 +626,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
border-bottom: 2px solid transparent;
margin-bottom: -1px;
&[aria-selected="true"] {
color: var(--color-primary) !important;
border-bottom-color: var(--color-primary) !important;
color: var(--color-link) !important;
border-bottom-color: var(--color-link) !important;
}
&:hover, &:focus {
@include lightDark(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8));

View File

@ -258,7 +258,6 @@ input[type=color] {
border-radius: 2px;
display: inline-block;
border: 2px solid currentColor;
opacity: 0.6;
overflow: hidden;
fill: currentColor;
.svg-icon {

View File

@ -90,7 +90,7 @@ h2.list-heading {
* Link styling
*/
a {
color: var(--color-primary);
color: var(--color-link);
fill: currentColor;
cursor: pointer;
text-decoration: none;
@ -107,7 +107,7 @@ a {
display: inline-block;
}
&:focus img:only-child {
outline: 2px dashed var(--color-primary);
outline: 2px dashed var(--color-link);
outline-offset: 2px;
}
}

View File

@ -39,6 +39,7 @@ $fs-s: 12px;
:root {
--color-primary: #206ea7;
--color-primary-light: rgba(32,110,167,0.15);
--color-link: #206ea7;
--color-page: #206ea7;
--color-page-draft: #7e50b1;

View File

@ -113,7 +113,7 @@ $loadingSize: 10px;
&:focus {
top: $-xl;
outline-offset: -10px;
outline: 2px dotted var(--color-primary);
outline: 2px dotted var(--color-link);
}
}

View File

@ -14,13 +14,13 @@
option:event-emit-select:name="insert"
type="button"
title="{{ trans('entities.attachments_insert_link') }}"
class="drag-card-action text-center text-primary">@icon('link') </button>
class="drag-card-action text-center text-link">@icon('link') </button>
<button component="event-emit-select"
option:event-emit-select:name="edit"
option:event-emit-select:id="{{ $attachment->id }}"
type="button"
title="{{ trans('common.edit') }}"
class="drag-card-action text-center text-primary">@icon('edit')</button>
class="drag-card-action text-center text-link">@icon('edit')</button>
<div component="dropdown" class="flex-fill relative">
<button refs="dropdown@toggle"
type="button"
@ -28,7 +28,7 @@
class="drag-card-action text-center text-neg">@icon('close')</button>
<div refs="dropdown@menu" class="dropdown-menu">
<p class="text-neg small px-m mb-xs">{{ trans('entities.attachments_delete') }}</p>
<button refs="ajax-delete-row@delete" type="button" class="text-primary small delete text-item">{{ trans('common.confirm') }}</button>
<button refs="ajax-delete-row@delete" type="button" class="text-link small delete text-item">{{ trans('common.confirm') }}</button>
</div>
</div>
</div>

View File

@ -35,7 +35,7 @@
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
<div class="icon-list text-primary">
<div class="icon-list text-link">
@if(user()->can('book-create-all'))
<a href="{{ url("/create-book") }}" data-shortcut="new" class="icon-list-item">
<span>@icon('add')</span>

View File

@ -17,7 +17,7 @@
<li>
<form action="{{ $book->getUrl('/convert-to-shelf') }}" method="POST">
{!! csrf_field() !!}
<button type="submit" class="text-primary text-item">{{ trans('common.confirm') }}</button>
<button type="submit" class="text-link text-item">{{ trans('common.confirm') }}</button>
</form>
</li>
</ul>

View File

@ -11,7 +11,7 @@
</div>
<div class="form-group collapsible" component="collapsible" id="logo-control">
<button refs="collapsible@trigger" type="button" class="collapse-title text-primary" aria-expanded="false">
<button refs="collapsible@trigger" type="button" class="collapse-title text-link" aria-expanded="false">
<label>{{ trans('common.cover_image') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">
@ -27,7 +27,7 @@
</div>
<div class="form-group collapsible" component="collapsible" id="tags-control">
<button refs="collapsible@trigger" type="button" class="collapse-title text-primary" aria-expanded="false">
<button refs="collapsible@trigger" type="button" class="collapse-title text-link" aria-expanded="false">
<label for="tag-manager">{{ trans('entities.book_tags') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">

View File

@ -91,7 +91,7 @@
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
<div class="icon-list text-primary">
<div class="icon-list text-link">
@if(userCan('page-create', $book))
<a href="{{ $book->getUrl('/create-page') }}" data-shortcut="new" class="icon-list-item">

View File

@ -28,7 +28,7 @@
</div>
<div class="form-group" collapsible>
<button type="button" class="collapse-title text-primary" collapsible-trigger aria-expanded="false">
<button type="button" class="collapse-title text-link" collapsible-trigger aria-expanded="false">
<label for="entity_selection">{{ trans('entities.pages_copy_desination') }}</label>
</button>
<div class="collapse-content" collapsible-content>

View File

@ -18,7 +18,7 @@
<li>
<form action="{{ $chapter->getUrl('/convert-to-book') }}" method="POST">
{!! csrf_field() !!}
<button type="submit" class="text-primary text-item">{{ trans('common.confirm') }}</button>
<button type="submit" class="text-link text-item">{{ trans('common.confirm') }}</button>
</form>
</li>
</ul>

View File

@ -12,7 +12,7 @@
</div>
<div class="form-group collapsible" component="collapsible" id="logo-control">
<button refs="collapsible@trigger" type="button" class="collapse-title text-primary" aria-expanded="false">
<button refs="collapsible@trigger" type="button" class="collapse-title text-link" aria-expanded="false">
<label for="tags">{{ trans('entities.chapter_tags') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">

View File

@ -105,7 +105,7 @@
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
<div class="icon-list text-primary">
<div class="icon-list text-link">
@if(userCan('page-create', $chapter))
<a href="{{ $chapter->getUrl('/create-page') }}" data-shortcut="new" class="icon-list-item">

View File

@ -5,7 +5,7 @@
{{ csrf_field() }}
<input type="hidden" name="type" value="{{ get_class($entity) }}">
<input type="hidden" name="id" value="{{ $entity->id }}">
<button type="submit" data-shortcut="favourite" class="icon-list-item text-primary">
<button type="submit" data-shortcut="favourite" class="icon-list-item text-link">
<span>@icon($isFavourite ? 'star' : 'star-outline')</span>
<span>{{ $isFavourite ? trans('common.unfavourite') : trans('common.favourite') }}</span>
</button>

View File

@ -4,12 +4,12 @@
{!! method_field('PATCH') !!}
@if ($view === 'list')
<button type="submit" name="view" value="grid" class="icon-list-item text-primary">
<button type="submit" name="view" value="grid" class="icon-list-item text-link">
<span class="icon">@icon('grid')</span>
<span>{{ trans('common.grid_view') }}</span>
</button>
@else
<button type="submit" name="view" value="list" class="icon-list-item text-primary">
<button type="submit" name="view" value="list" class="icon-list-item text-link">
<span>@icon('list')</span>
<span>{{ trans('common.list_view') }}</span>
</button>

View File

@ -16,7 +16,7 @@ $inheriting - Boolean if the current row should be marked as inheriting default
</span>
@if($role->id !== 0)
<button type="button"
class="ml-auto flex-none text-small text-primary text-button hover-underline item-list-row-toggle-all hide-under-s"
class="ml-auto flex-none text-small text-link text-button hover-underline item-list-row-toggle-all hide-under-s"
refs="permissions-table@toggle-all"
><strong>{{ trans('common.toggle_all') }}</strong></button>
@endif

View File

@ -11,7 +11,7 @@
@section('right')
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
<div class="icon-list text-primary">
<div class="icon-list text-link">
@if(user()->can('book-create-all'))
<a href="{{ url("/create-book") }}" class="icon-list-item">
<span>@icon('add')</span>
@ -19,8 +19,8 @@
</a>
@endif
@include('entities.view-toggle', ['view' => $view, 'type' => 'books'])
@include('home.parts.expand-toggle', ['classes' => 'text-primary', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
@include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-primary'])
@include('home.parts.expand-toggle', ['classes' => 'text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
@include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-link'])
</div>
</div>
@stop

View File

@ -6,12 +6,12 @@
<div class="grid half">
<div>
<div class="icon-list inline block">
@include('home.parts.expand-toggle', ['classes' => 'text-muted text-primary', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
@include('home.parts.expand-toggle', ['classes' => 'text-muted text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
</div>
</div>
<div class="text-m-right">
<div class="icon-list inline block">
@include('common.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-primary'])
@include('common.dark-mode-toggle', ['classes' => 'text-muted icon-list-item text-link'])
</div>
</div>
</div>

View File

@ -11,7 +11,7 @@
@section('right')
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
<div class="icon-list text-primary">
<div class="icon-list text-link">
@if(user()->can('bookshelf-create-all'))
<a href="{{ url("/create-shelf") }}" class="icon-list-item">
<span>@icon('add')</span>
@ -19,8 +19,8 @@
</a>
@endif
@include('entities.view-toggle', ['view' => $view, 'type' => 'bookshelves'])
@include('home.parts.expand-toggle', ['classes' => 'text-primary', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
@include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-primary'])
@include('home.parts.expand-toggle', ['classes' => 'text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
@include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-link'])
</div>
</div>
@stop

View File

@ -19,9 +19,9 @@
@section('right')
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
<div class="icon-list text-primary">
@include('home.parts.expand-toggle', ['classes' => 'text-primary', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
@include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-primary'])
<div class="icon-list text-link">
@include('home.parts.expand-toggle', ['classes' => 'text-link', 'target' => '.entity-list.compact .entity-item-snippet', 'key' => 'home-details'])
@include('common.dark-mode-toggle', ['classes' => 'icon-list-item text-link'])
</div>
</div>
@stop

View File

@ -11,7 +11,7 @@
refs="tri-layout@tab"
data-tab="info"
aria-label="{{ trans('common.tab_info_label') }}"
class="tri-layout-mobile-tab px-m py-m text-primary">
class="tri-layout-mobile-tab px-m py-m text-link">
{{ trans('common.tab_info') }}
</button>
<button type="button"
@ -19,7 +19,7 @@
data-tab="content"
aria-label="{{ trans('common.tab_content_label') }}"
aria-selected="true"
class="tri-layout-mobile-tab px-m py-m text-primary active">
class="tri-layout-mobile-tab px-m py-m text-link active">
{{ trans('common.tab_content') }}
</button>
</div>

View File

@ -19,7 +19,7 @@
<form action="{{ url('/mfa/' . $method . '/remove') }}" method="post">
{{ csrf_field() }}
{{ method_field('delete') }}
<button class="text-primary small text-item">{{ trans('common.confirm') }}</button>
<button class="text-link small text-item">{{ trans('common.confirm') }}</button>
</form>
</div>
</div>

View File

@ -29,7 +29,7 @@
</div>
<div class="form-group" collapsible>
<button type="button" class="collapse-title text-primary" collapsible-trigger aria-expanded="false">
<button type="button" class="collapse-title text-link" collapsible-trigger aria-expanded="false">
<label for="entity_selection">{{ trans('entities.pages_copy_desination') }}</label>
</button>
<div class="collapse-content" collapsible-content>

View File

@ -3,14 +3,14 @@
<div class="action-buttons text-left px-m py-xs">
<a href="{{ $isDraft ? $page->getParent()->getUrl() : $page->getUrl() }}"
class="text-button text-primary">@icon('back')<span class="hide-under-l">{{ trans('common.back') }}</span></a>
class="text-button text-link">@icon('back')<span class="hide-under-l">{{ trans('common.back') }}</span></a>
</div>
<div class="text-center px-m">
<div component="dropdown"
option:dropdown:move-menu="true"
class="dropdown-container draft-display text {{ $draftsEnabled ? '' : 'hidden' }}">
<button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" title="{{ trans('entities.pages_edit_draft_options') }}" class="text-primary text-button py-s px-m"><span refs="page-editor@draftDisplay" class="faded-text"></span>&nbsp; @icon('more')</button>
<button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" title="{{ trans('entities.pages_edit_draft_options') }}" class="text-link text-button py-s px-m"><span refs="page-editor@draftDisplay" class="faded-text"></span>&nbsp; @icon('more')</button>
@icon('check-circle', ['class' => 'text-pos draft-notification svg-icon', 'refs' => 'page-editor@draftDisplayIcon'])
<ul refs="dropdown@menu" class="dropdown-menu" role="menu">
<li>
@ -68,7 +68,7 @@
<div component="dropdown"
option:dropdown:move-menu="true"
class="dropdown-container">
<button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="text-primary text-button">@icon('edit') <span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span></button>
<button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="text-link text-button">@icon('edit') <span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span></button>
<ul refs="dropdown@menu" class="wide dropdown-menu">
<li class="px-l py-m">
<p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>
@ -82,7 +82,7 @@
<span>{{-- Prevents button jumping on menu show --}}</span>
</div>
<button type="submit" id="save-button" class="float-left text-primary text-button text-pos-hover hide-under-m">@icon('save')<span>{{ trans('entities.pages_save') }}</span></button>
<button type="submit" id="save-button" class="float-left text-link text-button text-pos-hover hide-under-m">@icon('save')<span>{{ trans('entities.pages_save') }}</span></button>
</div>
</div>
</div>

View File

@ -44,7 +44,7 @@
<button type="submit"
id="save-button-mobile"
title="{{ trans('entities.pages_save') }}"
class="text-primary text-button hide-over-m page-save-mobile-button">@icon('save')</button>
class="text-link text-button hide-over-m page-save-mobile-button">@icon('save')</button>
{{--Editor Change Dialog--}}
@component('common.confirm-dialog', ['title' => trans('entities.pages_editor_switch_title'), 'ref' => 'page-editor@switchDialog'])

View File

@ -3,7 +3,7 @@
<div component="event-emit-select"
option:event-emit-select:name="image"
option:event-emit-select:data="{{ json_encode($image) }}"
class="image anim fadeIn text-primary"
class="image anim fadeIn text-link"
style="animation-delay: {{ $index > 26 ? '160ms' : ($index * 25) . 'ms' }};">
<img src="{{ $image->thumbs['gallery'] }}"
alt="{{ $image->name }}"

View File

@ -46,7 +46,7 @@
<form action="{{ $revision->getUrl('/restore') }}" method="POST">
{!! csrf_field() !!}
<input type="hidden" name="_method" value="PUT">
<button type="submit" class="text-primary icon-item">
<button type="submit" class="text-link icon-item">
@icon('history')
<div>{{ trans('entities.pages_revisions_restore') }}</div>
</button>

View File

@ -66,7 +66,7 @@
@foreach($pageNav as $navItem)
<li class="page-nav-item h{{ $navItem['level'] }}">
<a href="{{ $navItem['link'] }}" class="text-limit-lines-1 block">{{ $navItem['text'] }}</a>
<div class="primary-background sidebar-page-nav-bullet"></div>
<div class="link-background sidebar-page-nav-bullet"></div>
</li>
@endforeach
</div>
@ -143,7 +143,7 @@
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
<div class="icon-list text-primary">
<div class="icon-list text-link">
{{--User Actions--}}
@if(userCan('page-update', $page))

View File

@ -22,7 +22,7 @@
<form action="{{ url('/settings/recycle-bin/empty') }}" method="POST">
{!! csrf_field() !!}
<button type="submit" class="text-primary small delete text-item">{{ trans('common.confirm') }}</button>
<button type="submit" class="text-link small delete text-item">{{ trans('common.confirm') }}</button>
</form>
</div>
</div>

View File

@ -1,7 +1,7 @@
<div class="item-list-row flex-container-row items-center wrap">
<div class="flex py-s px-m min-width-s">
<strong>{{ $title }}</strong> <br>
<a href="#" refs="permissions-table@toggle-row" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
<a href="#" refs="permissions-table@toggle-row" class="text-small text-link">{{ trans('common.toggle_all') }}</a>
</div>
<div class="flex py-s px-m min-width-xxs">
<small class="hide-over-m bold">{{ trans('common.create') }}<br></small>

View File

@ -28,7 +28,7 @@
<div component="permissions-table">
<label class="setting-list-label">{{ trans('settings.role_system') }}</label>
<a href="#" refs="permissions-table@toggle-all" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
<a href="#" refs="permissions-table@toggle-all" class="text-small text-link">{{ trans('common.toggle_all') }}</a>
<div class="toggle-switch-list grid half mt-m">
<div>
@ -62,7 +62,7 @@
class="item-list toggle-switch-list">
<div class="item-list-row flex-container-row items-center hide-under-m bold">
<div class="flex py-s px-m min-width-s">
<a href="#" refs="permissions-table@toggle-all" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
<a href="#" refs="permissions-table@toggle-all" class="text-small text-link">{{ trans('common.toggle_all') }}</a>
</div>
<div refs="permissions-table@toggle-column" class="flex py-s px-m min-width-xxs">{{ trans('common.create') }}</div>
<div refs="permissions-table@toggle-column" class="flex py-s px-m min-width-xxs">{{ trans('common.view') }}</div>

View File

@ -1,7 +1,7 @@
<div class="item-list-row flex-container-row items-center wrap">
<div class="flex py-s px-m min-width-s">
<strong>{{ $title }}</strong> <br>
<a href="#" refs="permissions-table@toggle-row" class="text-small text-primary">{{ trans('common.toggle_all') }}</a>
<a href="#" refs="permissions-table@toggle-row" class="text-small text-link">{{ trans('common.toggle_all') }}</a>
</div>
<div class="flex py-s px-m min-width-xxs">
<small class="hide-over-m bold">{{ trans('common.create') }}<br></small>

View File

@ -8,7 +8,7 @@
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
<div class="icon-list text-primary">
<div class="icon-list text-link">
@if(userCan('bookshelf-create-all'))
<a href="{{ url("/create-shelf") }}" data-shortcut="new" class="icon-list-item">
<span>@icon('add')</span>

View File

@ -44,7 +44,7 @@
<div class="form-group collapsible" component="collapsible" id="logo-control">
<button refs="collapsible@trigger" type="button" class="collapse-title text-primary" aria-expanded="false">
<button refs="collapsible@trigger" type="button" class="collapse-title text-link" aria-expanded="false">
<label>{{ trans('common.cover_image') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">
@ -60,7 +60,7 @@
</div>
<div class="form-group collapsible" component="collapsible" id="tags-control">
<button refs="collapsible@trigger" type="button" class="collapse-title text-primary" aria-expanded="false">
<button refs="collapsible@trigger" type="button" class="collapse-title text-link" aria-expanded="false">
<label for="tag-manager">{{ trans('entities.shelf_tags') }}</label>
</button>
<div refs="collapsible@content" class="collapse-content">

View File

@ -109,7 +109,7 @@
@section('right')
<div class="actions mb-xl">
<h5>{{ trans('common.actions') }}</h5>
<div class="icon-list text-primary">
<div class="icon-list text-link">
@if(userCan('book-create-all') && userCan('bookshelf-update', $shelf))
<a href="{{ $shelf->getUrl('/create-book') }}" data-shortcut="new" class="icon-list-item">