Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases 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 * Callouts
*/ */
.callout { .callout {
border-inline-start: 3px solid #BBB; border-left: 3px solid #BBB;
background-color: #EEE; background-color: #EEE;
padding: $-s $-s $-s $-xl; padding: $-s $-s $-s $-xl;
display: block; display: block;
@ -24,30 +24,30 @@
opacity: 0.8; opacity: 0.8;
} }
&.success { &.success {
border-left-color: $positive; @include lightDark(border-left-color, $positive, $positive-dark);
@include lightDark(background-color, lighten($positive, 68%), darken($positive, 22%)); @include lightDark(background-color, lighten($positive, 68%), darken($positive-dark, 36%));
@include lightDark(color, darken($positive, 16%), lighten($positive, 5%)); @include lightDark(color, darken($positive, 16%), $positive-dark);
} }
&.success:before { &.success:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+"); background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
} }
&.danger { &.danger {
border-left-color: $negative; @include lightDark(border-left-color, $negative, $negative-dark);
@include lightDark(background-color, lighten($negative, 56%), darken($negative, 30%)); @include lightDark(background-color, lighten($negative, 56%), darken($negative-dark, 55%));
@include lightDark(color, darken($negative, 20%), lighten($negative, 5%)); @include lightDark(color, darken($negative, 20%), $negative-dark);
} }
&.danger:before { &.danger:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg=="); background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
} }
&.info { &.info {
border-left-color: $info; @include lightDark(border-left-color, $info, $info-dark);
@include lightDark(color, darken($info, 20%), lighten($info, 10%)); @include lightDark(color, darken($info, 20%), $info-dark);
@include lightDark(background-color, lighten($info, 50%), darken($info, 35%)); @include lightDark(background-color, lighten($info, 50%), darken($info-dark, 34%));
} }
&.warning { &.warning {
border-left-color: $warning; @include lightDark(border-left-color, $warning, $warning-dark);
@include lightDark(background-color, lighten($warning, 50%), darken($warning, 36%)); @include lightDark(background-color, lighten($warning, 50%), darken($warning-dark, 50%));
@include lightDark(color, darken($warning, 20%), $warning); @include lightDark(color, darken($warning, 20%), $warning-dark);
} }
&.warning:before { &.warning:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4="); background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");

2
resources/sass/_codemirror.scss
View File

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

12
resources/sass/_colors.scss
View File

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

14
resources/sass/_components.scss
View File

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

4
resources/sass/_forms.scss
View File

@ -13,10 +13,10 @@
max-width: 100%; max-width: 100%;
&.neg, &.invalid { &.neg, &.invalid {
border: 1px solid $negative; border: 1px solid var(--color-negative);
} }
&.pos, &.valid { &.pos, &.valid {
border: 1px solid $positive; border: 1px solid var(--color-positive);
} }
&.disabled, &[disabled] { &.disabled, &[disabled] {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==); 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; $fs-s: 12px;
// Colours // Colours
$positive: #0f7d15;
$negative: #ab0f0e;
$info: #0288D1;
$warning: #cf4d03;
$positive-dark: #4aa850;
$negative-dark: #e85c5b;
$info-dark: #0288D1;
$warning-dark: #de8a5a;
:root { :root {
--color-primary: #206ea7; --color-primary: #206ea7;
--color-primary-light: rgba(32,110,167,0.15); --color-primary-light: rgba(32,110,167,0.15);
@ -47,22 +56,26 @@ $fs-s: 12px;
--color-book: #077b70; --color-book: #077b70;
--color-bookshelf: #a94747; --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"); --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 { :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"); --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-scheme: only dark;
--color-positive: #4aa850;
--color-negative: #e85c5b;
--color-warning: #de8a5a;
} }
:root:not(.dark-mode) { :root:not(.dark-mode) {
color-scheme: only light; color-scheme: only light;
} }
$positive: #0f7d15;
$negative: #ab0f0e;
$info: #0288D1;
$warning: #cf4d03;
// Text colours // Text colours
$text-dark: #444; $text-dark: #444;