generated from mirzaev/pot
начало работы над сессиями и там дохуя чего ещё
This commit is contained in:
@@ -1,182 +1,182 @@
|
||||
@keyframes glare {
|
||||
|
||||
2%,
|
||||
100% {
|
||||
left : 130%;
|
||||
bottom : -200%;
|
||||
width : 120px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
section#authentication {
|
||||
z-index : 1000;
|
||||
width : 400px;
|
||||
position : relative;
|
||||
margin : 25vh auto;
|
||||
display : flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
section#authentication>section.header {
|
||||
z-index : 1000;
|
||||
height : 100px;
|
||||
margin-left : -50px;
|
||||
padding : 30px 0;
|
||||
display : flex;
|
||||
clip-path : url(#authentication-header-mask);
|
||||
border-radius : 3px 3px 0 0;
|
||||
animation-duration: 120s;
|
||||
}
|
||||
|
||||
section#authentication>section.header>img.avatar {
|
||||
z-index : 1500;
|
||||
left : 6px;
|
||||
top : 36px;
|
||||
width : 88px;
|
||||
height : 88px;
|
||||
position : absolute;
|
||||
margin : auto;
|
||||
object-fit : cover;
|
||||
border-radius : 100%;
|
||||
cursor : pointer;
|
||||
image-rendering : smooth;
|
||||
box-shadow : 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
|
||||
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
|
||||
-moz-box-shadow : 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
section#authentication>section.header>img.avatar:hover {
|
||||
left : 0;
|
||||
top : 30px;
|
||||
width : 100px;
|
||||
height : 100px;
|
||||
box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
|
||||
-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
section#authentication>section.header>img.cover {
|
||||
z-index : -5000;
|
||||
left : -50px;
|
||||
top : 0;
|
||||
position : absolute;
|
||||
width : calc(100% + 100px);
|
||||
height : 100%;
|
||||
object-position: 0px 30%;
|
||||
object-fit : cover;
|
||||
clip-path : polygon(50px 0, calc(100% - 50px) 0, calc(100% - 50px) 100%, 50px 100%);
|
||||
border-radius : 0 0 3px 3px;
|
||||
background : var(--background-above);
|
||||
}
|
||||
|
||||
section#authentication>section.header>div.glare {
|
||||
z-index : 3000;
|
||||
left : -30px;
|
||||
top : -300px;
|
||||
width : 30px;
|
||||
height : 400%;
|
||||
position : absolute;
|
||||
rotate : 25deg;
|
||||
opacity : 0.2;
|
||||
filter : unset;
|
||||
pointer-events : none;
|
||||
animation-name : glare;
|
||||
animation-duration : 32s;
|
||||
animation-delay : 2s;
|
||||
animation-fill-mode : forwards;
|
||||
animation-timing-function: linear;
|
||||
background-color : #fff;
|
||||
}
|
||||
|
||||
section#authentication>section.header>div {
|
||||
animation-duration: 80s;
|
||||
}
|
||||
|
||||
section#authentication>section.header>a {
|
||||
margin : auto;
|
||||
width : 100%;
|
||||
margin-left : 110px;
|
||||
padding-bottom: 0.5ex;
|
||||
white-space : nowrap;
|
||||
overflow-x : hidden;
|
||||
text-overflow : ellipsis;
|
||||
font-size : 1.3em;
|
||||
font-weight : bold;
|
||||
color : var(--text-inverse);
|
||||
text-shadow : 0 0 8px #00000080;
|
||||
}
|
||||
|
||||
|
||||
section#authentication>section.body {
|
||||
margin-top : -160px;
|
||||
padding : 180px 30px 20px 30px;
|
||||
gap : 3ex;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
border-radius : 3px;
|
||||
background-color : var(--background-above);
|
||||
/* background-image : radial-gradient(circle at 70% 20%, #000000A0 0%, var(--background-above) 75%); */
|
||||
box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
section#authentication>section.body>ul {
|
||||
margin : unset;
|
||||
margin-left : 10%;
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
|
||||
section#authentication>section.body ul ul {
|
||||
padding-top: 1ex;
|
||||
}
|
||||
|
||||
section#authentication>section.body ul li:not(:last-child) {
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button {
|
||||
padding : 1ex 2ex;
|
||||
cursor : pointer;
|
||||
border-radius : 3px;
|
||||
font-size : 0.9em;
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button:hover {
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button:active {
|
||||
color : var(--text-active);
|
||||
transition: unset;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button:first-of-type {
|
||||
margin-left : auto;
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button:last-of-type {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button.accept {
|
||||
padding : 1ex 5ex;
|
||||
color : var(--text-inverse);
|
||||
background-color: #63954d;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button.accept:hover {
|
||||
color : var(--text-inverse-above);
|
||||
background-color: #6fa259;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button.accept:active {
|
||||
background-color: #63954d;
|
||||
}
|
||||
@keyframes glare {
|
||||
|
||||
2%,
|
||||
100% {
|
||||
left : 130%;
|
||||
bottom : -200%;
|
||||
width : 120px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
section#authentication {
|
||||
z-index : 1000;
|
||||
width : 400px;
|
||||
position : relative;
|
||||
margin : 25vh auto;
|
||||
display : flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
section#authentication>section.header {
|
||||
z-index : 1000;
|
||||
height : 100px;
|
||||
margin-left : -50px;
|
||||
padding : 30px 0;
|
||||
display : flex;
|
||||
clip-path : url(#authentication-header-mask);
|
||||
border-radius : 3px 3px 0 0;
|
||||
animation-duration: 120s;
|
||||
}
|
||||
|
||||
section#authentication>section.header>img.avatar {
|
||||
z-index : 1500;
|
||||
left : 6px;
|
||||
top : 36px;
|
||||
width : 88px;
|
||||
height : 88px;
|
||||
position : absolute;
|
||||
margin : auto;
|
||||
object-fit : cover;
|
||||
border-radius : 100%;
|
||||
cursor : pointer;
|
||||
image-rendering : smooth;
|
||||
box-shadow : 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
|
||||
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
|
||||
-moz-box-shadow : 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
section#authentication>section.header>img.avatar:hover {
|
||||
left : 0;
|
||||
top : 30px;
|
||||
width : 100px;
|
||||
height : 100px;
|
||||
box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
|
||||
-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
section#authentication>section.header>img.cover {
|
||||
z-index : -5000;
|
||||
left : -50px;
|
||||
top : 0;
|
||||
position : absolute;
|
||||
width : calc(100% + 100px);
|
||||
height : 100%;
|
||||
object-position: 0px 30%;
|
||||
object-fit : cover;
|
||||
clip-path : polygon(50px 0, calc(100% - 50px) 0, calc(100% - 50px) 100%, 50px 100%);
|
||||
border-radius : 0 0 3px 3px;
|
||||
background : var(--background-above);
|
||||
}
|
||||
|
||||
section#authentication>section.header>div.glare {
|
||||
z-index : 3000;
|
||||
left : -30px;
|
||||
top : -300px;
|
||||
width : 30px;
|
||||
height : 400%;
|
||||
position : absolute;
|
||||
rotate : 25deg;
|
||||
opacity : 0.2;
|
||||
filter : unset;
|
||||
pointer-events : none;
|
||||
animation-name : glare;
|
||||
animation-duration : 32s;
|
||||
animation-delay : 2s;
|
||||
animation-fill-mode : forwards;
|
||||
animation-timing-function: linear;
|
||||
background-color : #fff;
|
||||
}
|
||||
|
||||
section#authentication>section.header>div {
|
||||
animation-duration: 80s;
|
||||
}
|
||||
|
||||
section#authentication>section.header>a {
|
||||
margin : auto;
|
||||
width : 100%;
|
||||
margin-left : 110px;
|
||||
padding-bottom: 0.5ex;
|
||||
white-space : nowrap;
|
||||
overflow-x : hidden;
|
||||
text-overflow : ellipsis;
|
||||
font-size : 1.3em;
|
||||
font-weight : bold;
|
||||
color : var(--text-inverse);
|
||||
text-shadow : 0 0 8px #00000080;
|
||||
}
|
||||
|
||||
|
||||
section#authentication>section.body {
|
||||
margin-top : -160px;
|
||||
padding : 180px 30px 20px 30px;
|
||||
gap : 3ex;
|
||||
display : flex;
|
||||
flex-direction : column;
|
||||
border-radius : 3px;
|
||||
background-color : var(--background-above);
|
||||
/* background-image : radial-gradient(circle at 70% 20%, #000000A0 0%, var(--background-above) 75%); */
|
||||
box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow : 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
section#authentication>section.body>ul {
|
||||
margin : unset;
|
||||
margin-left : 10%;
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
|
||||
section#authentication>section.body ul ul {
|
||||
padding-top: 1ex;
|
||||
}
|
||||
|
||||
section#authentication>section.body ul li:not(:last-child) {
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button {
|
||||
padding : 1ex 2ex;
|
||||
cursor : pointer;
|
||||
border-radius : 3px;
|
||||
font-size : 0.9em;
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button:hover {
|
||||
color: var(--text-hover);
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button:active {
|
||||
color : var(--text-active);
|
||||
transition: unset;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button:first-of-type {
|
||||
margin-left : auto;
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button:last-of-type {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button.accept {
|
||||
padding : 1ex 5ex;
|
||||
color : var(--text-inverse);
|
||||
background-color: #63954d;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button.accept:hover {
|
||||
color : var(--text-inverse-above);
|
||||
background-color: #6fa259;
|
||||
}
|
||||
|
||||
section#authentication>section.body div.buttons>button.accept:active {
|
||||
background-color: #63954d;
|
||||
}
|
||||
|
||||
@@ -1,134 +1,134 @@
|
||||
@keyframes red {
|
||||
25% {
|
||||
left: -240%;
|
||||
top : -130%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: -100%;
|
||||
top : -120%;
|
||||
}
|
||||
|
||||
75% {
|
||||
left: -160%;
|
||||
top : -230%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: -250%;
|
||||
top : -300%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blue {
|
||||
25% {
|
||||
left: -180%;
|
||||
top : -100%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: -120%;
|
||||
top : -250%;
|
||||
}
|
||||
|
||||
75% {
|
||||
left: -250%;
|
||||
top : -300%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: -280%;
|
||||
top : -80%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes green {
|
||||
25% {
|
||||
left: -120%;
|
||||
top : -250%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: -250%;
|
||||
top : -300%;
|
||||
}
|
||||
|
||||
75% {
|
||||
left: -280%;
|
||||
top : -80%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: -180%;
|
||||
top : -100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wrap-background {
|
||||
25% {
|
||||
background-color: #9395ff;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: #fff393;
|
||||
}
|
||||
|
||||
75% {
|
||||
background-color: #534eff;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: #ff5c5c;
|
||||
}
|
||||
}
|
||||
|
||||
:is(div, section).gradient {
|
||||
position : relative;
|
||||
overflow : hidden;
|
||||
animation-duration : 30s;
|
||||
animation-name : wrap-background;
|
||||
animation-iteration-count: infinite;
|
||||
background-repeat : no-repeat;
|
||||
animation-timing-function: ease-in-out;
|
||||
background-color : #ff5c5c;
|
||||
}
|
||||
|
||||
:is(div, section).gradient>div:not(.gradient) {
|
||||
z-index : -1000;
|
||||
width : 500%;
|
||||
height : 500%;
|
||||
position : absolute;
|
||||
pointer-events : none;
|
||||
filter : blur(200px);
|
||||
animation-duration : 12s;
|
||||
background-repeat : no-repeat;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
:is(div, section).gradient>div.red {
|
||||
left : -250%;
|
||||
top : -300%;
|
||||
animation-name: red;
|
||||
background-image: radial-gradient(circle,
|
||||
rgba(255, 25, 25, 1) 0%,
|
||||
rgba(0, 0, 0, 0) 35%);
|
||||
}
|
||||
|
||||
:is(div, section).gradient>div.blue {
|
||||
left : -280%;
|
||||
top : -80%;
|
||||
animation-name: blue;
|
||||
background-image: radial-gradient(circle,
|
||||
rgba(25, 25, 255, 0.6) 0%,
|
||||
rgba(0, 0, 0, 0) 35%);
|
||||
}
|
||||
|
||||
:is(div, section).gradient>div.green {
|
||||
left : -180%;
|
||||
top : -100%;
|
||||
animation-name: green;
|
||||
background-image: radial-gradient(circle,
|
||||
rgba(25, 255, 25, 1) 0%,
|
||||
rgba(0, 0, 0, 0) 35%);
|
||||
}
|
||||
@keyframes red {
|
||||
25% {
|
||||
left: -240%;
|
||||
top : -130%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: -100%;
|
||||
top : -120%;
|
||||
}
|
||||
|
||||
75% {
|
||||
left: -160%;
|
||||
top : -230%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: -250%;
|
||||
top : -300%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blue {
|
||||
25% {
|
||||
left: -180%;
|
||||
top : -100%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: -120%;
|
||||
top : -250%;
|
||||
}
|
||||
|
||||
75% {
|
||||
left: -250%;
|
||||
top : -300%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: -280%;
|
||||
top : -80%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes green {
|
||||
25% {
|
||||
left: -120%;
|
||||
top : -250%;
|
||||
}
|
||||
|
||||
50% {
|
||||
left: -250%;
|
||||
top : -300%;
|
||||
}
|
||||
|
||||
75% {
|
||||
left: -280%;
|
||||
top : -80%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: -180%;
|
||||
top : -100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wrap-background {
|
||||
25% {
|
||||
background-color: #9395ff;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: #fff393;
|
||||
}
|
||||
|
||||
75% {
|
||||
background-color: #534eff;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: #ff5c5c;
|
||||
}
|
||||
}
|
||||
|
||||
:is(div, section).gradient {
|
||||
position : relative;
|
||||
overflow : hidden;
|
||||
animation-duration : 30s;
|
||||
animation-name : wrap-background;
|
||||
animation-iteration-count: infinite;
|
||||
background-repeat : no-repeat;
|
||||
animation-timing-function: ease-in-out;
|
||||
background-color : #ff5c5c;
|
||||
}
|
||||
|
||||
:is(div, section).gradient>div:not(.gradient) {
|
||||
z-index : -1000;
|
||||
width : 500%;
|
||||
height : 500%;
|
||||
position : absolute;
|
||||
pointer-events : none;
|
||||
filter : blur(200px);
|
||||
animation-duration : 12s;
|
||||
background-repeat : no-repeat;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
:is(div, section).gradient>div.red {
|
||||
left : -250%;
|
||||
top : -300%;
|
||||
animation-name: red;
|
||||
background-image: radial-gradient(circle,
|
||||
rgba(255, 25, 25, 1) 0%,
|
||||
rgba(0, 0, 0, 0) 35%);
|
||||
}
|
||||
|
||||
:is(div, section).gradient>div.blue {
|
||||
left : -280%;
|
||||
top : -80%;
|
||||
animation-name: blue;
|
||||
background-image: radial-gradient(circle,
|
||||
rgba(25, 25, 255, 0.6) 0%,
|
||||
rgba(0, 0, 0, 0) 35%);
|
||||
}
|
||||
|
||||
:is(div, section).gradient>div.green {
|
||||
left : -180%;
|
||||
top : -100%;
|
||||
animation-name: green;
|
||||
background-image: radial-gradient(circle,
|
||||
rgba(25, 255, 25, 1) 0%,
|
||||
rgba(0, 0, 0, 0) 35%);
|
||||
}
|
||||
|
||||
@@ -1,245 +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);
|
||||
}
|
||||
@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);
|
||||
}
|
||||
|
||||
@@ -1,31 +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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -1,29 +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)
|
||||
}
|
||||
.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)
|
||||
}
|
||||
|
||||
@@ -1,225 +1,225 @@
|
||||
@import url('/fonts/comissioner.ttf');
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--background-above-1 : #fff;
|
||||
--background-above : #fff6f6;
|
||||
--background : #e8dada;
|
||||
--background-below : #d7c5c5;
|
||||
--background-inverse : #221e1e;
|
||||
--background-inverse-dark : #120f0f;
|
||||
--node-background-important: #c3eac3;
|
||||
--node-background-completed: #b0c0b0;
|
||||
--node-background : #bdb;
|
||||
--connection : #b2b7b2;
|
||||
--connection-completed : #d1d1d1;
|
||||
--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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-above-1: #322d2d;
|
||||
--background-above : #2b2525;
|
||||
--background : #221e1e;
|
||||
--background-below : #121010;
|
||||
--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;
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
--link : #3c76ff;
|
||||
--link-hover : #6594ff;
|
||||
--link-active: #3064dd;
|
||||
}
|
||||
|
||||
* {
|
||||
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);
|
||||
transition: unset;
|
||||
}
|
||||
|
||||
body {
|
||||
height : 100vh;
|
||||
margin : 0;
|
||||
overflow : hidden;
|
||||
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;
|
||||
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;
|
||||
height : 100%;
|
||||
display : flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
footer {
|
||||
z-index : 3000;
|
||||
position: absolute;
|
||||
}
|
||||
@import url('/fonts/commissioner.ttf');
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--background-above-1 : #fff;
|
||||
--background-above : #fff6f6;
|
||||
--background : #e8dada;
|
||||
--background-below : #d7c5c5;
|
||||
--background-inverse : #221e1e;
|
||||
--background-inverse-dark : #120f0f;
|
||||
--node-background-important: #c3eac3;
|
||||
--node-background-completed: #b0c0b0;
|
||||
--node-background : #bdb;
|
||||
--connection : #b2b7b2;
|
||||
--connection-completed : #d1d1d1;
|
||||
--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;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background-above-1: #322d2d;
|
||||
--background-above : #2b2525;
|
||||
--background : #221e1e;
|
||||
--background-below : #121010;
|
||||
--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;
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
--link : #3c76ff;
|
||||
--link-hover : #6594ff;
|
||||
--link-active: #3064dd;
|
||||
}
|
||||
|
||||
* {
|
||||
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);
|
||||
transition: unset;
|
||||
}
|
||||
|
||||
body {
|
||||
height : 100vh;
|
||||
margin : 0;
|
||||
overflow : hidden;
|
||||
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;
|
||||
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;
|
||||
height : 100%;
|
||||
display : flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
footer {
|
||||
z-index : 3000;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user