svoboda/accounts
1
1
Fork 0
generated from mirzaev/pot
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

graphic update

Browse Source
This commit is contained in:
Arsen Mirzaev Tatyano-Muradovich
2022-11-30 12:39:56 +10:00
parent cbeec14a9f
commit c1d8b96f49
9 changed files with 564 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
mirzaev/site/account/system/public/css/graph.css Normal file
View File

@@ -0,0 +1,245 @@
@keyframes node-select {
from {
outline-offset: 0px;
}
to {
outline : 2px solid var(--grey-light);
outline-offset: 10px;
}
}
@keyframes node-select-revert {
from {
outline : 2px solid var(--grey-light);
outline-offset: 10px;
}
to {
outline-offset: 0px;
}
}
@keyframes description-select {
from {
outline-offset: 0px;
}
to {
outline : 2px solid var(--grey);
outline-offset: 10px;
}
}
@keyframes description-select-revert {
from {
outline : 2px solid var(--grey);
outline-offset: 10px;
}
to {
outline-offset: 0px;
}
}
section.graph {
z-index : 0;
width : 100vw;
height : 100vh;
position : absolute;
transition: unset;
}
section.graph * {
transition: unset;
}
section.graph:active {
cursor: move;
}
section.graph article.node {
z-index : 500;
position : absolute;
display : flex;
cursor : grab;
border-radius : 100%;
background-color : var(--node-background);
}
section.graph article.node.animated {
animation-duration : 0.1s;
animation-name : node-select-revert;
animation-fill-mode : forwards;
}
section.graph article.node.animated:hover {
animation-duration : 0.1s;
animation-name : node-select;
animation-fill-mode : forwards;
}
section.graph article.node:active {
cursor : grabbing;
background-color: var(--node-background-important);
}
section.graph article.node>h4.title {
margin : auto;
text-align: center;
cursor : pointer;
}
section.graph article.node>div.description {
z-index : 1000;
position : absolute;
text-align : justify;
text-align-last : center;
border-radius : 100%;
overflow : hidden;
background-color: var(--node-background-completed);
}
/* section.graph article.node>div.description.animated {
animation-duration : 0.1s;
animation-name : description-select-revert;
animation-fill-mode : forwards;
}
section.graph article.node>div.description.animated:hover {
animation-duration : 0.1s;
animation-name : description-select;
animation-fill-mode : forwards;
} */
section.graph article.node * {
transition: 0.1s ease-in;
}
section.graph article.node>div.description>span.wrapper {
width : 50%;
height : 100%;
shape-margin: 15px;
}
section.graph article.node>div.description>span.left.wrapper {
float : left;
shape-outside: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%, 68% 98%, 38% 90%, 10% 72%, 0% 50%, 10% 28%, 20% 20%, 100% 20%);
}
section.graph article.node>div.description>span.right.wrapper {
float : right;
shape-outside: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%, 0% 20%, 82% 20%, 90% 28%, 100% 50%, 90% 72%, 60% 90%, 32% 98%);
}
section.graph article.node>div.description>p {
z-index : 1500;
position : relative;
margin : 0;
opacity : 0;
word-break: break-all;
color : var(--text-inverse);
}
section.graph article.node>div.description:hover>p {
opacity: 1;
}
section.graph article.node>div.description>a.source {
z-index : 2000;
top : calc(20% - 1.3em + (1em - 1.3ex));
left : 0;
position : absolute;
font-weight: bold;
font-size : 1.3em;
opacity : 0;
}
section.graph article.node.white>div.description>a.source {
color: var(--text-inverse);
}
section.graph article.node.white>div.description>a.source:active {
color: var(--text-inverse-active);
}
section.graph article.node.white>div.description>a.source:hover {
color: var(--text-inverse-hover);
}
section.graph article.node.red>div.description>a.source {
color: var(--text-red);
}
section.graph article.node.red>div.description>a.source:active {
color: var(--text-red-active);
}
section.graph article.node.red>div.description>a.source:hover {
color: var(--text-red-hover);
}
section.graph article.node>div.description>a.source.red:active {
color: var(--text-red-active);
}
section.graph article.node>div.description:hover>a.source {
opacity: 1;
}
section.graph article.node>div.description>a.source:visited ::after {
content : '';
width : 100%;
height : 100%;
background-color: var(--node-background-completed);
}
section.graph article.node>div.description>img.cover {
left : 0;
top : 0;
position : absolute;
width : 100%;
height : 100%;
object-fit : cover;
pointer-events: none;
filter : unset;
}
section.graph article.node>div.description:hover>img.cover {
filter: blur(5px) brightness(0.5);
}
section.graph article.node>i.close {
z-index : -2000;
top : -10%;
right : -10%;
position : absolute;
scale : 0;
opacity : 0;
cursor : pointer;
color : var(--text);
transition: 0.2s ease-out;
}
section.graph article.node>i.close:hover {
scale : 1.4 !important;
color : var(--text-hover);
transition: 0.1s ease-in;
}
section.graph article.node>i.close:active {
scale : 1.2 !important;
color : var(--text-active);
transition: unset;
}
section.graph svg.connection {
z-index : -500;
position: absolute;
width : 100%;
height : 100%;
}
section.graph svg.connection>line {
stroke: var(--connection);
}