mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-07-31 15:24:31 +03:00
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.
This commit is contained in:
Dan Brown
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user