graphic update

This commit is contained in:
2022-11-30 12:39:56 +10:00
parent cbeec14a9f
commit c1d8b96f49
9 changed files with 564 additions and 95 deletions

View File

@@ -2,7 +2,10 @@
@media (prefers-color-scheme: light) {
:root {
--background : #eee;
--background-above-1 : #fff;
--background-above : #fff6f6;
--background : #e8dada;
--background-below : #d7c5c5;
--background-inverse : #221e1e;
--background-inverse-dark : #120f0f;
--node-background-important: #c3eac3;
@@ -10,29 +13,24 @@
--node-background : #bdb;
--connection : #b2b7b2;
--connection-completed : #d1d1d1;
--text : #131313;
--text-hover : #292929;
--text-active : #0c0c0c;
--text-inverse : #e6e6e6;
--text-inverse-hover : #fff;
--text-inverse-active : #d0d0d0;
--text : #151313;
--text-hover : #463e3e;
--text-active : #0e0e0e;
--text-inverse-above : #fff;
--text-inverse : #efefef;
--text-inverse-below : #d0d0d0;
--text-red : #f8a2a2;
--text-red-hover : #ffbcbc;
--text-red-active : #e69191;
--link : #3c76ff;
--link-hover : #6594ff;
--link-active : #3064dd;
}
}
@media (prefers-color-scheme: dark) {
:root {
--background-light-3: #403939;
--background-light-2: #322d2d;
--background-light-1: #2b2525;
--background-light : #252020;
--background-above-1: #322d2d;
--background-above : #2b2525;
--background : #221e1e;
--block-background : ;
--background-below : #121010;
--node-background : #221e1e;
--text : #e6e6e6;
--text-hover : #fff;
@@ -45,10 +43,32 @@
}
}
@keyframes page-background-gradient {
25% {
left: -350%;
top : 0%;
}
50% {
left: 0%;
top : 0%;
}
75% {
left: 0%;
top : -350%;
}
to {
left: -350%;
top : -350%;
}
}
:root {
--grey-light: #c0c0c0;
--grey : #858585;
--grey-dark : #565656;
--link : #3c76ff;
--link-hover : #6594ff;
--link-active: #3064dd;
}
* {
@@ -78,7 +98,8 @@ a:hover {
}
a:active {
color: var(--link-active);
color : var(--link-active);
transition: unset;
}
body {
@@ -88,6 +109,22 @@ body {
background-color: var(--background);
}
body>div.background {
z-index : -50000;
left : -350%;
top : -350%;
width : 500%;
height : 500%;
position : absolute;
filter : blur(200px);
animation-duration : 15s;
animation-name : page-background-gradient;
animation-iteration-count: infinite;
background-repeat : no-repeat;
animation-timing-function: linear;
background-image : radial-gradient(circle, var(--background-above) 0%, rgba(0, 0, 0, 0) 100%);
}
aside {
z-index : 500;
grid-column: 1/ 4;
@@ -176,9 +213,9 @@ header>nav {
}
main {
z-index: 1000;
height: 100%;
display: flex;
z-index : 1000;
height : 100%;
display : flex;
flex-direction: column;
}