mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-04-02 21:59:06 +08:00
CSS: Updated status colors to be CSS variables, Added dark variants
Needed some level of harcoding though due to callouts using colors, which can't be css colors as DOMPDF won't understand these. Use css variables elsewhere and added new dark variants to fit a bit better.
This commit is contained in:
Dan Brown
parent
b01bbf9c89
commit
f7ad387a10
@ -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…
x
Reference in New Issue
Block a user