transition from site-mirzaev

mirzaev/site/account/system/public/css/account.css

@@ -0,0 +1,33 @@
+section#account {
+    z-index : 10000;
+    right   : 40px;
+    bottom  : 40px;
+    position: absolute;
+    display : flex;
+}
+
+section#account>button#login {
+    width           : 80px;
+    height          : 80px;
+    display         : flex;
+    border-radius   : 100%;
+    cursor          : pointer;
+    overflow        : hidden;
+    background-color: var(--background-inverse);
+}
+
+section#account>button#login>i.icon.authentication {
+    width           : 12px;
+    margin          : auto;
+    color           : var(--text-inverse);
+    background-color: unset;
+}
+
+section#account>button#login:hover>i.icon.authentication {
+    background-color: var(--grey-dark);
+}
+
+
+section#account>button#login:active>i.icon.authentication {
+    background-color: unset;
+}

mirzaev/site/account/system/public/css/books.css

@@ -0,0 +1,52 @@
+main>section#books {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+main>section#books>* {
+    margin-bottom: 20px;
+}
+
+main>section#books>form.upload {
+    width: calc(100% / 3 - 20px - 9px * 2);
+    height: calc(220px - 9px * 2);
+    margin: 5px;
+    margin-right: 20px;
+}
+
+main>section#books>form.upload>p {
+    font-size: 3rem;
+    height: 0.3rem;
+    line-height: 0;
+}
+
+main>section#books>article.book {
+    width: calc(100% / 3 - 20px);
+    margin-right: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+main>section#books>article.book:nth-child(3) {
+    width: calc(100% / 3);
+    margin-right: unset;
+}
+
+main>section#books>article.book>img {
+    height: 220px;
+    object-fit: cover;
+    object-position: right;
+    overflow: hidden;
+    clip-path: polygon(5px calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 5px, 5px 5px);
+}
+
+main>section#books>article.book>h4 {
+    margin-top: 5px;
+    margin-bottom: 10px;
+    height: 50px;
+    text-align: center;
+}
+
+main>section#books>article.book>p {
+    margin: unset;
+}

mirzaev/site/account/system/public/css/graph.css

@@ -0,0 +1,244 @@
+@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 {
+    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);
+}

mirzaev/site/account/system/public/css/hotline.css

@@ -0,0 +1,31 @@
+section.hotline {
+    display: inline-flex;
+    height : 100%;
+}
+
+section.hotline * {
+    transition: unset;
+}
+
+section.hotline:last-child {
+    margin-bottom: unset;
+}
+
+section.hotline>article {
+    margin-right    : 18px;
+    width           : 140px;
+    height          : 190px;
+    display         : flex;
+    align-self      : flex-end;
+    border-radius   : 3px;
+    background-color: var(--background-light-1);
+    box-shadow      : 0px -6px 6px rgba(0, 0, 0, 0.3);
+}
+
+section.hotline>article:last-child {
+    margin-right: unset;
+}
+
+section.hotline>article>* {
+    margin: auto;
+}

mirzaev/site/account/system/public/css/icon_authentication.css

@@ -0,0 +1,40 @@
+.icon.authentication {
+    box-sizing                : border-box;
+    position                  : relative;
+    display                   : block;
+    transform                 : scale(var(--ggs, 1));
+    width                     : 6px;
+    height                    : 16px;
+    border                    : 2px solid;
+    border-left               : 0;
+    border-top-right-radius   : 2px;
+    border-bottom-right-radius: 2px;
+    margin-right              : -10px
+}
+
+.icon.authentication::after,
+.icon.authentication::before {
+    content   : "";
+    display   : block;
+    box-sizing: border-box;
+    position  : absolute
+}
+
+.icon.authentication::after {
+    border-top  : 2px solid;
+    border-right: 2px solid;
+    transform   : rotate(45deg);
+    width       : 8px;
+    height      : 8px;
+    left        : -8px;
+    bottom      : 2px
+}
+
+.icon.authentication::before {
+    border-radius: 3px;
+    width        : 10px;
+    height       : 2px;
+    background   : currentColor;
+    left         : -11px;
+    bottom       : 5px
+}

mirzaev/site/account/system/public/css/icon_close.css

@@ -0,0 +1,29 @@
+.icon.close {
+    box-sizing   : border-box;
+    position     : relative;
+    display      : block;
+    transform    : scale(var(--ggs, 1));
+    width        : 22px;
+    height       : 22px;
+    border       : 2px solid transparent;
+    border-radius: 40px
+}
+
+.icon.close::after,
+.icon.close::before {
+    content      : "";
+    display      : block;
+    box-sizing   : border-box;
+    position     : absolute;
+    width        : 16px;
+    height       : 2px;
+    background   : currentColor;
+    transform    : rotate(45deg);
+    border-radius: 5px;
+    top          : 8px;
+    left         : 1px
+}
+
+.icon.close::after {
+    transform: rotate(-45deg)
+}

mirzaev/site/account/system/public/css/main.css

@@ -0,0 +1,185 @@
+@import url('/fonts/comissioner.ttf');
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --background               : #eee;
+        --background-inverse       : #221e1e;
+        --background-inverse-dark  : #120f0f;
+        --node-background-important: #c3eac3;
+        --node-background-completed: #b0c0b0;
+        --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-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        : #221e1e;
+        --block-background  : ;
+        --node-background   : #221e1e;
+        --text              : #e6e6e6;
+        --text-hover        : #fff;
+        --text-active       : #d0d0d0;
+        --text-inverse      : 'dark';
+        --red-light-1       : #dc4343;
+        --red-light         : #bf3737;
+        --red               : #a43333;
+        --red-dark          : #8d2a2a;
+    }
+}
+
+:root {
+    --grey-light: #c0c0c0;
+    --grey      : #858585;
+    --grey-dark : #565656;
+}
+
+* {
+    text-decoration: none;
+    outline        : none;
+    border         : none;
+    color          : var(--text);
+    font-family    : 'Commissioner', sans-serif;
+    transition     : 0.1s ease-out;
+}
+
+.unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select  : none;
+    -khtml-user-select   : none;
+    -moz-user-select     : none;
+    -ms-user-select      : none;
+    user-select          : none;
+}
+
+a {
+    color: var(--link);
+}
+
+a:hover {
+    color: var(--link-hover);
+}
+
+a:active {
+    color: var(--link-active);
+}
+
+body {
+    height          : 100vh;
+    margin          : 0;
+    overflow        : hidden;
+    background-color: var(--background);
+}
+
+aside {
+    z-index    : 500;
+    grid-column: 1/ 4;
+    grid-row   : 2;
+    overflow   : hidden;
+}
+
+header {
+    z-index       : 5000;
+    position      : absolute;
+    display       : flex;
+    flex-direction: column;
+    box-shadow    : 2px 0 5px rgba(0, 0, 0, 0.3);
+}
+
+header>menu {
+    margin          : unset;
+    padding         : 20px;
+    display         : flex;
+    flex-direction  : column;
+    flex-grow       : 1;
+    background-color: var(--background-light-1);
+}
+
+header>#account>button#login {
+    z-index: 1500;
+}
+
+header>menu a {
+    margin-bottom: 8px;
+    display      : flex;
+    align-items  : center;
+}
+
+header>menu a:last-child {
+    margin-bottom: unset;
+}
+
+header>menu a svg {
+    margin-right: 8px;
+    height      : 1.2rem;
+    position    : relative;
+}
+
+header>menu a:hover svg {
+    margin-left : -5px;
+    margin-right: 13px;
+}
+
+header>menu a svg path {
+    fill: var(--text);
+}
+
+header>section {
+    background-color: var(--background-light-1);
+}
+
+header :is(button, a[type="button"]) {
+    width           : 100%;
+    height          : 40px;
+    display         : flex;
+    justify-content : center;
+    align-items     : center;
+    cursor          : pointer;
+    background-color: var(--red);
+    transition      : unset;
+}
+
+header button {
+    font-weight   : bold;
+    text-transform: uppercase;
+}
+
+header :is(button, a[type="button"]):hover {
+    background-color: var(--red-light);
+}
+
+header :is(button, a[type="button"]):active {
+    background-color: var(--red-dark);
+}
+
+header>nav {
+    margin-top    : auto;
+    display       : flex;
+    flex-direction: column;
+}
+
+main {
+    z-index: 1000;
+}
+
+footer {
+    z-index : 3000;
+    position: absolute;
+}

mirzaev/site/account/system/public/css/upload.css

@@ -0,0 +1,33 @@
+form.upload {
+    width: 100%;
+    height: 100px;
+    position: relative;
+    display: flex;
+    border: 4px dashed #e5ddd1;
+}
+
+form.upload:hover {
+    background-color: #ccc6bd;
+    border: 4px dashed #fff7ea;
+}
+
+form.upload>p {
+    margin: auto;
+    font-weight: bold;
+    color: #eee6d9;
+}
+
+form.upload:hover>p {
+    color: #fff7ea;
+}
+
+form.upload>input {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    opacity: 0;
+}
+
+form.upload:hover>input {
+    cursor: pointer;
+}