malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Improve infobox gradient

Browse Source 
Now with cubic-bezier!
This commit is contained in:
Tetrakern 2024-02-12 20:03:48 +01:00
parent 83e5d7b779
commit 9d891cbf3b
6 changed files with 50 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CREDITS.md
View File

@ -81,6 +81,11 @@ The following list credits all third-party resources used in the Fictioneer them
License: No license (public domain)<br>
Source: https://meyerweb.com/eric/tools/css/reset/
* **Easing Gradients**<br>
Copyright: Andreas Larsen<br>
License: [MIT](https://github.com/larsenwork/postcss-easing-gradients?tab=MIT-1-ov-file#readme)<br>
Source: https://larsenwork.com/easing-gradients/
## JavaScript
* **Diff Match Patch**<br>

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

2
css/editor.css
View File

File diff suppressed because one or more lines are too long

2
css/properties.css
View File

File diff suppressed because one or more lines are too long

22
src/scss/common/_lightmode.scss
View File

@ -273,7 +273,27 @@
--infobox-background: hsl(var(--bg-1000-free) / 5%);
--infobox-text: var(--fg-600);
--infobox-background-free: var(--bg-1000-free);
--infobox-gradient: linear-gradient(-90deg, hsl(var(--infobox-background-free) / 3%) 0%, hsl(var(--infobox-background-free) / 3%) 55%, transparent 90%);
// --infobox-gradient: linear-gradient(-90deg, hsl(var(--infobox-background-free) / 3%) 0%, hsl(var(--infobox-background-free) / 3%) 55%, transparent 90%); // Old
// Derived from: https://larsenwork.com/easing-gradients/
--infobox-gradient: linear-gradient(
to left,
hsl(var(--infobox-background-free) / 0.02961) 48.645%,
hsl(var(--infobox-background-free) / 0.02853) 51.975%,
hsl(var(--infobox-background-free) / 0.02688) 55.125%,
hsl(var(--infobox-background-free) / 0.02475) 58.05%,
hsl(var(--infobox-background-free) / 0.02223) 60.885%,
hsl(var(--infobox-background-free) / 0.01944) 63.54%,
hsl(var(--infobox-background-free) / 0.0165) 66.195%,
hsl(var(--infobox-background-free) / 0.0135) 68.805%,
hsl(var(--infobox-background-free) / 0.01056) 71.46%,
hsl(var(--infobox-background-free) / 0.00777) 74.115%,
hsl(var(--infobox-background-free) / 0.00525) 76.95%,
hsl(var(--infobox-background-free) / 0.00312) 79.875%,
hsl(var(--infobox-background-free) / 0.00147) 83.025%,
hsl(var(--infobox-background-free) / 0.00039) 86.355%,
hsl(var(--infobox-background-free) / 0) 90%
);
// === TOOLTIPS/NOTIFICATIONS ================================================
--tooltip-background: var(--bg-800);

22
src/scss/common/_properties.scss
View File

@ -406,7 +406,27 @@
--infobox-background: var(--bg-900);
--infobox-text: var(--fg-600);
--infobox-background-free: var(--bg-900-free);
--infobox-gradient: linear-gradient(-90deg, hsl(var(--infobox-background-free) / 40%) 0%, hsl(var(--infobox-background-free) / 40%) 55%, transparent 90%);
// --infobox-gradient: linear-gradient(-90deg, hsl(var(--infobox-background-free) / 40%) 0%, hsl(var(--infobox-background-free) / 40%) 55%, transparent 90%); // Old
// Derived from: https://larsenwork.com/easing-gradients/
--infobox-gradient: linear-gradient(
to left,
hsl(var(--infobox-background-free) / 0.395) 48.645%,
hsl(var(--infobox-background-free) / 0.380) 51.975%,
hsl(var(--infobox-background-free) / 0.358) 55.125%,
hsl(var(--infobox-background-free) / 0.33) 58.05%,
hsl(var(--infobox-background-free) / 0.296) 60.885%,
hsl(var(--infobox-background-free) / 0.259) 63.54%,
hsl(var(--infobox-background-free) / 0.22) 66.195%,
hsl(var(--infobox-background-free) / 0.18) 68.805%,
hsl(var(--infobox-background-free) / 0.141) 71.46%,
hsl(var(--infobox-background-free) / 0.104) 74.115%,
hsl(var(--infobox-background-free) / 0.07) 76.95%,
hsl(var(--infobox-background-free) / 0.042) 79.875%,
hsl(var(--infobox-background-free) / 0.02) 83.025%,
hsl(var(--infobox-background-free) / 0.0052) 86.355%,
hsl(var(--infobox-background-free) / 0) 90%
);
// === TOOLTIPS/NOTIFICATIONS ================================================
--tooltip-background: var(--fg-300);