From ae93a6ed073d385886bc7f0b0090e16d8bad977d Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sun, 25 Aug 2019 12:40:04 +0100 Subject: [PATCH] Converted primary color use to css variable - Removed all existing SCSS usage of primary color. - Cut down custom styles injection to just be css vars. - Reduced button styles so default button is primary. - Updated button styles to lighten/brighten on hover & active states even when a custom color is set. - Removed unused scss color vars. - Updated default BookStack blue to achieve better accessibility. --- app/Config/setting-defaults.php | 4 +- .../js/components/setting-app-color-picker.js | 2 +- resources/assets/sass/_buttons.scss | 72 +++++++++---------- resources/assets/sass/_colors.scss | 14 +++- resources/assets/sass/_components.scss | 17 ++++- resources/assets/sass/_forms.scss | 8 +-- resources/assets/sass/_header.scss | 15 ---- resources/assets/sass/_text.scss | 9 ++- resources/assets/sass/_variables.scss | 14 ++-- resources/assets/sass/styles.scss | 4 +- .../views/auth/invite-set-password.blade.php | 2 +- resources/views/auth/login.blade.php | 2 +- .../views/auth/passwords/email.blade.php | 2 +- .../views/auth/passwords/reset.blade.php | 2 +- resources/views/auth/register.blade.php | 2 +- .../views/auth/user-unconfirmed.blade.php | 2 +- resources/views/books/delete.blade.php | 2 +- resources/views/books/form.blade.php | 2 +- resources/views/books/sort.blade.php | 2 +- resources/views/chapters/delete.blade.php | 2 +- resources/views/chapters/form.blade.php | 2 +- resources/views/chapters/move.blade.php | 2 +- resources/views/comments/comment.blade.php | 2 +- resources/views/comments/create.blade.php | 2 +- .../views/components/code-editor.blade.php | 2 +- .../entity-selector-popup.blade.php | 2 +- .../views/components/image-manager.blade.php | 2 +- .../views/form/entity-permissions.blade.php | 2 +- .../views/pages/attachment-manager.blade.php | 4 +- resources/views/pages/copy.blade.php | 2 +- resources/views/pages/delete.blade.php | 2 +- resources/views/pages/guest-create.blade.php | 2 +- resources/views/pages/move.blade.php | 2 +- .../views/partials/custom-styles.blade.php | 24 +------ resources/views/search/all.blade.php | 2 +- resources/views/settings/index.blade.php | 8 +-- .../views/settings/roles/delete.blade.php | 2 +- resources/views/settings/roles/form.blade.php | 2 +- resources/views/shelves/form.blade.php | 2 +- resources/views/users/create.blade.php | 2 +- resources/views/users/delete.blade.php | 2 +- resources/views/users/edit.blade.php | 2 +- 42 files changed, 120 insertions(+), 133 deletions(-) diff --git a/app/Config/setting-defaults.php b/app/Config/setting-defaults.php index b48253eb1..43927557f 100644 --- a/app/Config/setting-defaults.php +++ b/app/Config/setting-defaults.php @@ -14,8 +14,8 @@ return [ 'app-logo' => '', 'app-name-header' => true, 'app-editor' => 'wysiwyg', - 'app-color' => '#0288D1', - 'app-color-light' => 'rgba(21, 101, 192, 0.15)', + 'app-color' => '#1d75b6', + 'app-color-light' => 'rgba(29,117,182,0.15)', 'app-custom-head' => false, 'registration-enabled' => false, diff --git a/resources/assets/js/components/setting-app-color-picker.js b/resources/assets/js/components/setting-app-color-picker.js index 064596d86..ddacc4bd0 100644 --- a/resources/assets/js/components/setting-app-color-picker.js +++ b/resources/assets/js/components/setting-app-color-picker.js @@ -10,7 +10,7 @@ class SettingAppColorPicker { this.colorInput.addEventListener('change', this.updateColor.bind(this)); this.colorInput.addEventListener('input', this.updateColor.bind(this)); this.resetButton.addEventListener('click', event => { - this.colorInput.value = '#0288D1'; + this.colorInput.value = '#1d75b6'; this.updateColor(); }); } diff --git a/resources/assets/sass/_buttons.scss b/resources/assets/sass/_buttons.scss index 024b9cd7e..e3d9e17ca 100644 --- a/resources/assets/sass/_buttons.scss +++ b/resources/assets/sass/_buttons.scss @@ -4,28 +4,6 @@ button { font-size: 100%; } -@mixin generate-button-colors($textColor, $backgroundColor) { - background-color: $backgroundColor; - color: $textColor; - fill: $textColor; - border: 1px solid $backgroundColor; - &:hover { - background-color: lighten($backgroundColor, 8%); - color: $textColor; - } - &:active { - background-color: darken($backgroundColor, 8%); - } - &:focus { - background-color: lighten($backgroundColor, 4%); - box-shadow: $bs-light; - color: $textColor; - } -} - -// Button Specific Variables -$button-border-radius: 2px; - .button { text-decoration: none; font-size: 0.85rem; @@ -36,39 +14,54 @@ $button-border-radius: 2px; display: inline-block; font-weight: 400; outline: 0; - border-radius: $button-border-radius; + border-radius: 2px; cursor: pointer; - transition: background-color ease-in-out 120ms, box-shadow ease-in-out 120ms; + transition: background-color ease-in-out 120ms, + filter ease-in-out 120ms, + box-shadow ease-in-out 120ms; box-shadow: none; - background-color: $primary; + background-color: var(--color-primary); color: #FFF; fill: #FFF; text-transform: uppercase; - border: 1px solid $primary; + border: 1px solid var(--color-primary); vertical-align: top; - &:hover, &:focus { + &:hover, &:focus, &:active { + background-color: var(--color-primary); text-decoration: none; + color: #FFFFFF; + } + &:hover { + box-shadow: $bs-light; + filter: brightness(110%); } &:focus { outline: 1px dotted currentColor; outline-offset: -$-xs; + box-shadow: none; + filter: brightness(90%); } &:active { outline: 0; - background-color: darken($primary, 8%); } } -.button.primary { - @include generate-button-colors(#FFFFFF, $primary); -} + .button.outline { background-color: transparent; - color: #888; - fill: #888; - border: 1px solid #DDD; + color: #666; + fill: currentColor; + border: 1px solid #CCC; &:hover, &:focus, &:active { + border: 1px solid #CCC; box-shadow: none; - background-color: #EEE; + background-color: #F2F2F2; + filter: none; + } + &:active { + border-color: #BBB; + background-color: #DDD; + color: #666; + box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); } } @@ -90,12 +83,18 @@ $button-border-radius: 2px; user-select: none; font-size: 0.75rem; line-height: 1.4em; - &:active { + color: var(--color-primary); + fill: var(--color-primary); + &:active { outline: 0; } &:hover { text-decoration: none; } + &:hover, &:focus { + color: var(--color-primary); + fill: var(--color-primary); + } } .button.block { @@ -125,6 +124,7 @@ $button-border-radius: 2px; .button[disabled] { background-color: #BBB; cursor: default; + border-color: #CCC; &:hover { background-color: #BBB; cursor: default; diff --git a/resources/assets/sass/_colors.scss b/resources/assets/sass/_colors.scss index 3664d0076..65f56a388 100644 --- a/resources/assets/sass/_colors.scss +++ b/resources/assets/sass/_colors.scss @@ -1,3 +1,13 @@ +/** + * Background colors + */ + +.primary-background { + background-color: var(--color-primary) !important; +} +.primary-background-light { + background-color: var(--color-primary-light); +} /* * Status text colors @@ -21,8 +31,8 @@ * Style text colors */ .text-primary, .text-primary:hover, .text-primary-hover:hover { - color: $primary !important; - fill: $primary !important; + color: var(--color-primary) !important; + fill: var(--color-primary) !important; } .text-muted { diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss index a61c235eb..0172956a7 100644 --- a/resources/assets/sass/_components.scss +++ b/resources/assets/sass/_components.scss @@ -150,9 +150,6 @@ padding: 8px $-m; } } -.popup-footer { - margin-top: 1px; -} body.flexbox-support #entity-selector-wrap .popup-body .form-group { height: 444px; min-height: 444px; @@ -582,6 +579,20 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group { } } +.nav-tabs { + text-align: center; + a, .tab-item { + padding: $-m; + display: inline-block; + color: #666; + fill: #666; + cursor: pointer; + &.selected { + border-bottom: 2px solid var(--color-primary); + } + } +} + .image-picker .none { display: none; } diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss index 3c81d6d9f..4f89533b0 100644 --- a/resources/assets/sass/_forms.scss +++ b/resources/assets/sass/_forms.scss @@ -98,7 +98,7 @@ max-width: 100%; } [drawio-diagram]:hover { - outline: 2px solid $primary; + outline: 2px solid var(--color-primary); } } @@ -339,16 +339,16 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] { button { background-color: transparent; border: none; - color: $primary; + fill: #666; padding: 0; cursor: pointer; position: absolute; left: 8px; - top: 9.5px; + top: 9px; } input { display: block; - padding-left: $-l; + padding-left: $-l + 4px; width: 300px; max-width: 100%; } diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss index 3cf55f1de..687ddd8d2 100644 --- a/resources/assets/sass/_header.scss +++ b/resources/assets/sass/_header.scss @@ -18,7 +18,6 @@ header { display: block; z-index: 11; top: 0; - background-color: $primary-dark; color: #fff; fill: #fff; border-bottom: 1px solid #DDD; @@ -371,18 +370,4 @@ header .search-box { .action-buttons .dropdown-container:last-child a { padding-left: $-xs; } -} - -.nav-tabs { - text-align: center; - a, .tab-item { - padding: $-m; - display: inline-block; - color: #666; - fill: #666; - cursor: pointer; - &.selected { - border-bottom: 2px solid $primary; - } - } } \ No newline at end of file diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss index f1d165a47..f4406144d 100644 --- a/resources/assets/sass/_text.scss +++ b/resources/assets/sass/_text.scss @@ -90,14 +90,14 @@ h2.list-heading { * Link styling */ a { - color: $primary; + color: var(--color-primary); + fill: var(--color-primary); cursor: pointer; text-decoration: none; - transition: color ease-in-out 80ms; + transition: filter ease-in-out 80ms; line-height: 1.6; &:hover { text-decoration: underline; - color: darken($primary, 20%); } &.icon { display: inline-block; @@ -195,7 +195,7 @@ pre { blockquote { display: block; position: relative; - border-left: 4px solid $primary; + border-left: 4px solid var(--color-primary); background-color: #F8F8F8; padding: $-s $-m $-s $-xl; &:before { @@ -239,7 +239,6 @@ pre code { } span.highlight { - //background-color: rgba($primary, 0.2); font-weight: bold; padding: 2px 4px; } diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss index 041b70edf..d2d25127b 100644 --- a/resources/assets/sass/_variables.scss +++ b/resources/assets/sass/_variables.scss @@ -41,20 +41,20 @@ $fs-m: 14px; $fs-s: 12px; // Colours -$primary: #0288D1; -$primary-dark: #0288D1; -$secondary: #cf4d03; +:root { + --color-primary: '#1d75b6'; + --color-primary-light: 'rgba(29,117,182,0.15)'; +} $positive: #0f7d15; $negative: #ab0f0e; -$info: $primary; -$warning: $secondary; -$primary-faded: rgba(21, 101, 192, 0.15); +$info: #0288D1; +$warning: #cf4d03; // Item Colors $color-bookshelf: #af5a5a; $color-book: #009688; $color-chapter: #d7804a; -$color-page: $primary; +$color-page: #0288D1; $color-page-draft: #9A60DA; // Text colours diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss index d403a714e..d6f4f251b 100644 --- a/resources/assets/sass/styles.scss +++ b/resources/assets/sass/styles.scss @@ -99,7 +99,7 @@ $loadingSize: 10px; // Back to top link $btt-size: 40px; [back-to-top] { - background-color: $primary; + background-color: var(--color-primary); position: fixed; bottom: $-m; right: $-l; @@ -187,7 +187,7 @@ $btt-size: 40px; margin-bottom: 0; } .entity-list-item.selected { - background-color: rgba(0, 0, 0, 0.15) !important; + background-color: rgba(0, 0, 0, 0.05) !important; } .loading { height: 400px; diff --git a/resources/views/auth/invite-set-password.blade.php b/resources/views/auth/invite-set-password.blade.php index 807bd417f..fbe62f21e 100644 --- a/resources/views/auth/invite-set-password.blade.php +++ b/resources/views/auth/invite-set-password.blade.php @@ -16,7 +16,7 @@
- +
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index 76aa3a6e9..438339e92 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -28,7 +28,7 @@
- +
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php index 864b4e7d2..8273ed235 100644 --- a/resources/views/auth/passwords/email.blade.php +++ b/resources/views/auth/passwords/email.blade.php @@ -16,7 +16,7 @@
- +
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php index 227b39079..930544cde 100644 --- a/resources/views/auth/passwords/reset.blade.php +++ b/resources/views/auth/passwords/reset.blade.php @@ -26,7 +26,7 @@
- +
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php index 9cf34f501..60ceba93c 100644 --- a/resources/views/auth/register.blade.php +++ b/resources/views/auth/register.blade.php @@ -31,7 +31,7 @@ {{ trans('auth.already_have_account') }}
- +
diff --git a/resources/views/auth/user-unconfirmed.blade.php b/resources/views/auth/user-unconfirmed.blade.php index 2142a5dcb..85473685b 100644 --- a/resources/views/auth/user-unconfirmed.blade.php +++ b/resources/views/auth/user-unconfirmed.blade.php @@ -24,7 +24,7 @@ @endif
- +
diff --git a/resources/views/books/delete.blade.php b/resources/views/books/delete.blade.php index 2860e8bcd..be3f742cb 100644 --- a/resources/views/books/delete.blade.php +++ b/resources/views/books/delete.blade.php @@ -23,7 +23,7 @@ {!! csrf_field() !!} {{ trans('common.cancel') }} - + diff --git a/resources/views/books/form.blade.php b/resources/views/books/form.blade.php index 5d3f11e2e..110019002 100644 --- a/resources/views/books/form.blade.php +++ b/resources/views/books/form.blade.php @@ -37,5 +37,5 @@
{{ trans('common.cancel') }} - +
\ No newline at end of file diff --git a/resources/views/books/sort.blade.php b/resources/views/books/sort.blade.php index 676e7112e..26ac8470f 100644 --- a/resources/views/books/sort.blade.php +++ b/resources/views/books/sort.blade.php @@ -28,7 +28,7 @@
{{ trans('common.cancel') }} - +
diff --git a/resources/views/chapters/delete.blade.php b/resources/views/chapters/delete.blade.php index 3444ee0fb..60f8c9933 100644 --- a/resources/views/chapters/delete.blade.php +++ b/resources/views/chapters/delete.blade.php @@ -27,7 +27,7 @@
{{ trans('common.cancel') }} - +
diff --git a/resources/views/chapters/form.blade.php b/resources/views/chapters/form.blade.php index 31d8597de..399d3fe36 100644 --- a/resources/views/chapters/form.blade.php +++ b/resources/views/chapters/form.blade.php @@ -22,5 +22,5 @@
{{ trans('common.cancel') }} - +
diff --git a/resources/views/chapters/move.blade.php b/resources/views/chapters/move.blade.php index 7f3de1322..b7fe6cb0a 100644 --- a/resources/views/chapters/move.blade.php +++ b/resources/views/chapters/move.blade.php @@ -27,7 +27,7 @@
{{ trans('common.cancel') }} - +
diff --git a/resources/views/comments/comment.blade.php b/resources/views/comments/comment.blade.php index 9d7f230dc..5fbdfa500 100644 --- a/resources/views/comments/comment.blade.php +++ b/resources/views/comments/comment.blade.php @@ -61,7 +61,7 @@
- +
diff --git a/resources/views/components/entity-selector-popup.blade.php b/resources/views/components/entity-selector-popup.blade.php index 6fb3334e9..0beee658d 100644 --- a/resources/views/components/entity-selector-popup.blade.php +++ b/resources/views/components/entity-selector-popup.blade.php @@ -7,7 +7,7 @@ @include('components.entity-selector', ['name' => 'entity-selector'])
- +
diff --git a/resources/views/components/image-manager.blade.php b/resources/views/components/image-manager.blade.php index 035a6b66f..0971c3ed9 100644 --- a/resources/views/components/image-manager.blade.php +++ b/resources/views/components/image-manager.blade.php @@ -72,7 +72,7 @@ -
diff --git a/resources/views/form/entity-permissions.blade.php b/resources/views/form/entity-permissions.blade.php index b3e148e21..f27209c48 100644 --- a/resources/views/form/entity-permissions.blade.php +++ b/resources/views/form/entity-permissions.blade.php @@ -37,6 +37,6 @@
{{ trans('common.cancel') }} - +
\ No newline at end of file diff --git a/resources/views/pages/attachment-manager.blade.php b/resources/views/pages/attachment-manager.blade.php index 7b16c6b7b..e362b95d5 100644 --- a/resources/views/pages/attachment-manager.blade.php +++ b/resources/views/pages/attachment-manager.blade.php @@ -57,7 +57,7 @@

- + @@ -92,7 +92,7 @@ - + diff --git a/resources/views/pages/copy.blade.php b/resources/views/pages/copy.blade.php index f19742172..2b5d7e74e 100644 --- a/resources/views/pages/copy.blade.php +++ b/resources/views/pages/copy.blade.php @@ -39,7 +39,7 @@
{{ trans('common.cancel') }} - +
diff --git a/resources/views/pages/delete.blade.php b/resources/views/pages/delete.blade.php index a72157a83..2ec046fa0 100644 --- a/resources/views/pages/delete.blade.php +++ b/resources/views/pages/delete.blade.php @@ -34,7 +34,7 @@
{{ trans('common.cancel') }} - +
diff --git a/resources/views/pages/guest-create.blade.php b/resources/views/pages/guest-create.blade.php index 4650f3a1c..5404d8f4b 100644 --- a/resources/views/pages/guest-create.blade.php +++ b/resources/views/pages/guest-create.blade.php @@ -27,7 +27,7 @@
{{ trans('common.cancel') }} - +
diff --git a/resources/views/pages/move.blade.php b/resources/views/pages/move.blade.php index 83421be93..7cf294f14 100644 --- a/resources/views/pages/move.blade.php +++ b/resources/views/pages/move.blade.php @@ -27,7 +27,7 @@
{{ trans('common.cancel') }} - +
diff --git a/resources/views/partials/custom-styles.blade.php b/resources/views/partials/custom-styles.blade.php index 2a293edc5..34b702c51 100644 --- a/resources/views/partials/custom-styles.blade.php +++ b/resources/views/partials/custom-styles.blade.php @@ -1,24 +1,6 @@ diff --git a/resources/views/search/all.blade.php b/resources/views/search/all.blade.php index 7a2cf65bd..f19e560a2 100644 --- a/resources/views/search/all.blade.php +++ b/resources/views/search/all.blade.php @@ -182,7 +182,7 @@ - + diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php index 510e3af1b..fd589e6e6 100644 --- a/resources/views/settings/index.blade.php +++ b/resources/views/settings/index.blade.php @@ -72,7 +72,7 @@
- +
@@ -135,7 +135,7 @@

{!! trans('settings.app_primary_color_desc') !!}

- +
@@ -173,7 +173,7 @@
- +
@@ -236,7 +236,7 @@
- +
diff --git a/resources/views/settings/roles/delete.blade.php b/resources/views/settings/roles/delete.blade.php index e0075fa8a..4f40345df 100644 --- a/resources/views/settings/roles/delete.blade.php +++ b/resources/views/settings/roles/delete.blade.php @@ -32,7 +32,7 @@
id}") }}" class="button outline">{{ trans('common.cancel') }} - +
diff --git a/resources/views/settings/roles/form.blade.php b/resources/views/settings/roles/form.blade.php index a9933a7a6..20b8d65ed 100644 --- a/resources/views/settings/roles/form.blade.php +++ b/resources/views/settings/roles/form.blade.php @@ -224,7 +224,7 @@ @if (isset($role) && $role->id) id}") }}" class="button outline">{{ trans('settings.role_delete') }} @endif - + diff --git a/resources/views/shelves/form.blade.php b/resources/views/shelves/form.blade.php index 1d152a143..fa1940948 100644 --- a/resources/views/shelves/form.blade.php +++ b/resources/views/shelves/form.blade.php @@ -66,5 +66,5 @@
{{ trans('common.cancel') }} - +
\ No newline at end of file diff --git a/resources/views/users/create.blade.php b/resources/views/users/create.blade.php index b9f404bb7..109b81225 100644 --- a/resources/views/users/create.blade.php +++ b/resources/views/users/create.blade.php @@ -20,7 +20,7 @@
{{ trans('common.cancel') }} - +
diff --git a/resources/views/users/delete.blade.php b/resources/views/users/delete.blade.php index aa9811bf5..d3349c2f3 100644 --- a/resources/views/users/delete.blade.php +++ b/resources/views/users/delete.blade.php @@ -20,7 +20,7 @@ id}") }}" class="button outline">{{ trans('common.cancel') }} - + diff --git a/resources/views/users/edit.blade.php b/resources/views/users/edit.blade.php index 92a36c943..9f8fba8df 100644 --- a/resources/views/users/edit.blade.php +++ b/resources/views/users/edit.blade.php @@ -58,7 +58,7 @@ @if($authMethod !== 'system') id}/delete") }}" class="button outline">{{ trans('settings.users_delete') }} @endif - +