diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss
index 1d9bfc272..a1268e6b4 100644
--- a/resources/sass/_blocks.scss
+++ b/resources/sass/_blocks.scss
@@ -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=");
diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss
index 0fd347cf8..50f5bdc10 100644
--- a/resources/sass/_codemirror.scss
+++ b/resources/sass/_codemirror.scss
@@ -50,7 +50,7 @@
fill: currentColor;
}
&.success {
- background: $positive;
+ background: var(--color-positive);
color: #FFF;
}
&:focus {
diff --git a/resources/sass/_colors.scss b/resources/sass/_colors.scss
index aff9ff6d0..c77c1d8b3 100644
--- a/resources/sass/_colors.scss
+++ b/resources/sass/_colors.scss
@@ -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;
}
/*
diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index 321c26e88..54c9434c4 100644
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -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 {
diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss
index 5276bb566..4722d9aa1 100644
--- a/resources/sass/_forms.scss
+++ b/resources/sass/_forms.scss
@@ -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==);
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
index aac9223f9..10329c700 100644
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_variables.scss
@@ -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;