mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-06-25 22:22:21 +00:00
Merge pull request #4301 from BookStackApp/css_color_variables
CSS: Updated status colors to be CSS variables, Added dark variants
This commit is contained in:
Dan Brown
GitHub
commit
56a40f1b23
|
|
@ -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=");
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
fill: currentColor;
|
||||
}
|
||||
&.success {
|
||||
background: $positive;
|
||||
background: var(--color-positive);
|
||||
color: #FFF;
|
||||
}
|
||||
&:focus {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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==);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user