luisgulo/BookStack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #4301 from BookStackApp/css_color_variables

Browse source 
CSS: Updated status colors to be CSS variables, Added dark variants
This commit is contained in:
Dan Brown 2023-06-13 15:54:27 +01:00 committed by GitHub
commit 56a40f1b23
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 47 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
resources/sass/_blocks.scss
View file

@ -3,7 +3,7 @@
* Callouts
*/
.callout {
border-inline-start: 3px solid #BBB;
border-left: 3px solid #BBB;
background-color: #EEE;
padding: $-s $-s $-s $-xl;
display: block;
@ -24,30 +24,30 @@
opacity: 0.8;
}
&.success {
border-left-color: $positive;
@include lightDark(background-color, lighten($positive, 68%), darken($positive, 22%));
@include lightDark(color, darken($positive, 16%), lighten($positive, 5%));
@include lightDark(border-left-color, $positive, $positive-dark);
@include lightDark(background-color, lighten($positive, 68%), darken($positive-dark, 36%));
@include lightDark(color, darken($positive, 16%), $positive-dark);
}
&.success:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
}
&.danger {
border-left-color: $negative;
@include lightDark(background-color, lighten($negative, 56%), darken($negative, 30%));
@include lightDark(color, darken($negative, 20%), lighten($negative, 5%));
@include lightDark(border-left-color, $negative, $negative-dark);
@include lightDark(background-color, lighten($negative, 56%), darken($negative-dark, 55%));
@include lightDark(color, darken($negative, 20%), $negative-dark);
}
&.danger:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
}
&.info {
border-left-color: $info;
@include lightDark(color, darken($info, 20%), lighten($info, 10%));
@include lightDark(background-color, lighten($info, 50%), darken($info, 35%));
@include lightDark(border-left-color, $info, $info-dark);
@include lightDark(color, darken($info, 20%), $info-dark);
@include lightDark(background-color, lighten($info, 50%), darken($info-dark, 34%));
}
&.warning {
border-left-color: $warning;
@include lightDark(background-color, lighten($warning, 50%), darken($warning, 36%));
@include lightDark(color, darken($warning, 20%), $warning);
@include lightDark(border-left-color, $warning, $warning-dark);
@include lightDark(background-color, lighten($warning, 50%), darken($warning-dark, 50%));
@include lightDark(color, darken($warning, 20%), $warning-dark);
}
&.warning:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");

2
resources/sass/_codemirror.scss
View file

@ -50,7 +50,7 @@
fill: currentColor;
}
&.success {
background: $positive;
background: var(--color-positive);
color: #FFF;
}
&:focus {

12
resources/sass/_colors.scss
View file

@ -22,18 +22,18 @@
* Status text colors
*/
.text-pos, .text-pos:hover, .text-pos-hover:hover {
color: $positive !important;
fill: $positive !important;
color: var(--color-positive) !important;
fill: var(--color-positive) !important;
}
.text-warn, .text-warn:hover, .text-warn-hover:hover {
color: $warning !important;
fill: $warning !important;
color: var(--color-warning) !important;
fill: var(--color-warning) !important;
}
.text-neg, .text-neg:hover, .text-neg-hover:hover {
color: $negative !important;
fill: $negative !important;
color: var(--color-negative) !important;
fill: var(--color-negative) !important;
}
/*

14
resources/sass/_components.scss
View file

@ -46,13 +46,13 @@
}
}
&.pos {
color: $positive;
color: var(--color-positive);
}
&.neg {
color: $negative;
color: var(--color-negative);
}
&.warning {
color: $warning;
color: var(--color-warning);
}
&.showing {
transform: translateX(0);
@ -334,10 +334,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
line-height: 1.2;
}
.dropzone-file-item-status[data-status="success"] {
color: $positive;
color: var(--color-positive);
}
.dropzone-file-item-status[data-status="error"] {
color: $negative;
color: var(--color-negative);
}
.dropzone-file-item-status[data-status] + .dropzone-file-item-label {
display: none;
@ -921,10 +921,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
display: inline-block;
}
.status-indicator-active {
background-color: $positive;
background-color: var(--color-positive);
}
.status-indicator-inactive {
background-color: $negative;
background-color: var(--color-negative);
}
.shortcut-container {

4
resources/sass/_forms.scss
View file

@ -13,10 +13,10 @@
max-width: 100%;
&.neg, &.invalid {
border: 1px solid $negative;
border: 1px solid var(--color-negative);
}
&.pos, &.valid {
border: 1px solid $positive;
border: 1px solid var(--color-positive);
}
&.disabled, &[disabled] {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==);

23
resources/sass/_variables.scss
View file

@ -36,6 +36,15 @@ $fs-m: 14px;
$fs-s: 12px;
// Colours
$positive: #0f7d15;
$negative: #ab0f0e;
$info: #0288D1;
$warning: #cf4d03;
$positive-dark: #4aa850;
$negative-dark: #e85c5b;
$info-dark: #0288D1;
$warning-dark: #de8a5a;
:root {
--color-primary: #206ea7;
--color-primary-light: rgba(32,110,167,0.15);
@ -47,22 +56,26 @@ $fs-s: 12px;
--color-book: #077b70;
--color-bookshelf: #a94747;
--color-positive: #{$positive};
--color-negative: #{$negative};
--color-info: #{$info};
--color-warning: #{$warning};
--bg-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='19' height='19' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(143)'%3E%3Crect width='100%25' height='100%25' fill='rgba(42, 67, 101,0)'/%3E%3Cpath d='M-10 30h60v20h-60zM-10-10h60v20h-60' fill='rgba(26, 32, 44,0)'/%3E%3Cpath d='M-10 10h60v20h-60zM-10-30h60v20h-60z' fill='rgba(0, 0, 0,0.05)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E");
}
:root.dark-mode {
--bg-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cpattern id='doodad' width='19' height='19' viewBox='0 0 40 40' patternUnits='userSpaceOnUse' patternTransform='rotate(143)'%3E%3Crect width='100%25' height='100%25' fill='rgba(42, 67, 101,0)'/%3E%3Cpath d='M-10 30h60v20h-60zM-10-10h60v20h-60' fill='rgba(26, 32, 44,0)'/%3E%3Cpath d='M-10 10h60v20h-60zM-10-30h60v20h-60z' fill='rgba(255, 255, 255,0.05)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23doodad)' height='200%25' width='200%25'/%3E%3C/svg%3E");
color-scheme: only dark;
--color-positive: #4aa850;
--color-negative: #e85c5b;
--color-warning: #de8a5a;
}
:root:not(.dark-mode) {
color-scheme: only light;
}
$positive: #0f7d15;
$negative: #ab0f0e;
$info: #0288D1;
$warning: #cf4d03;
// Text colours
$text-dark: #444;