export class SettingAppColorPicker extends Component {
setup() {
+ // TODO
this.colorInput = this.$refs.input;
this.lightColorInput = this.$refs.lightInput;
const selected = tabSection === sectionId;
tab.setAttribute('aria-selected', selected ? 'true' : 'false');
}
+
+ this.$emit('change', {section: sectionId});
}
}
\ No newline at end of file
'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',
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;
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;
}
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 {
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
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;
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));
border-radius: 2px;
display: inline-block;
border: 2px solid currentColor;
- opacity: 0.6;
overflow: hidden;
fill: currentColor;
.svg-icon {
* Link styling
*/
a {
- color: var(--color-primary);
+ color: var(--color-link);
fill: currentColor;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
&:focus img:only-child {
- outline: 2px dashed var(--color-primary);
+ outline: 2px dashed var(--color-link);
outline-offset: 2px;
}
}
:root {
--color-primary: #206ea7;
--color-primary-light: rgba(32,110,167,0.15);
+ --color-link: #206ea7;
--color-page: #206ea7;
--color-page-draft: #7e50b1;
&:focus {
top: $-xl;
outline-offset: -10px;
- outline: 2px dotted var(--color-primary);
+ outline: 2px dotted var(--color-link);
}
}
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"
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>
<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>
<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>
</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">
</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">
<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">
</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>
<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>
</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">
<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">
{{ 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>
{!! 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>
</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
@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>
</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
<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>
@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>
</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
@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
\ No newline at end of file
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"
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>
<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>
</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>
<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> @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> @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>
<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>
<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>
\ No newline at end of file
<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'])
<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 }}"
<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>
@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>
<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))
<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>
<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>
<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>
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>
<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>
<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>
<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">
</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">
@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">