mirror of
https://github.com/robonen/eulerian-cycle.git
synced 2026-03-20 10:54:46 +00:00
Update Design
This commit is contained in:
RomaFedoro
@@ -1,5 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
:root {
|
||||
--main-color: rgb(97 196 189);
|
||||
--complement-color: rgb(46 105 120);
|
||||
@@ -15,7 +13,7 @@
|
||||
background-color: var(--body-color);
|
||||
}
|
||||
|
||||
body > #app {
|
||||
body>#app {
|
||||
margin: 0;
|
||||
font-family: "Formular";
|
||||
height: 100%;
|
||||
@@ -31,6 +29,7 @@ html {
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
padding-right: 32px;
|
||||
padding-left: 32px;
|
||||
flex-direction: column;
|
||||
@@ -43,6 +42,7 @@ html {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.graph-cont,
|
||||
@@ -52,16 +52,17 @@ html {
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
padding: 48px 0;
|
||||
height: 60px;
|
||||
margin: 48px 0 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-step-cont {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-left: 48px;
|
||||
}
|
||||
|
||||
.header-step-description {
|
||||
@@ -80,33 +81,35 @@ header {
|
||||
width: 48px;
|
||||
height: 20px;
|
||||
margin: 0 12px;
|
||||
background-image: url("~@/assets/icons/vector.svg");
|
||||
background-image: url(~@/assets/icons/vector.svg);
|
||||
}
|
||||
|
||||
.control-cont {
|
||||
padding: 48px 0;
|
||||
padding: 36px 0 48px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-cont {
|
||||
padding: 48px 64px;
|
||||
.addition-cont {
|
||||
padding: 48px 0;
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
width: 34px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menu-cont__left {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.menu-cont__right {
|
||||
padding-left: 0;
|
||||
.menu {
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
.step-cont,
|
||||
.btn-cont {
|
||||
.btn-cont,
|
||||
.menu-cont {
|
||||
height: -webkit-max-content;
|
||||
height: -moz-max-content;
|
||||
height: max-content;
|
||||
margin: auto;
|
||||
}
|
||||
@@ -130,15 +133,6 @@ header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.header-close-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
opacity: 0.4;
|
||||
background-image: url("~@/assets/icons/close.svg");
|
||||
}
|
||||
|
||||
.step::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@@ -168,15 +162,29 @@ header {
|
||||
}
|
||||
|
||||
.dynamic-active-step::after {
|
||||
-webkit-animation-name: next;
|
||||
animation-name: next;
|
||||
-webkit-animation-duration: 4s;
|
||||
animation-duration: 4s;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@-webkit-keyframes next {
|
||||
from {
|
||||
background: #c1c1c1;
|
||||
}
|
||||
|
||||
to {
|
||||
background: #ff5c8e;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes next {
|
||||
from {
|
||||
background: #c1c1c1;
|
||||
}
|
||||
|
||||
to {
|
||||
background: #ff5c8e;
|
||||
}
|
||||
@@ -194,6 +202,7 @@ header {
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
opacity: 0.6;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-control-button {
|
||||
@@ -202,19 +211,19 @@ header {
|
||||
}
|
||||
|
||||
#previous-step {
|
||||
background-image: url("~@/assets/icons/previous-step.svg");
|
||||
background-image: url(~@/assets/icons/previous-step.svg);
|
||||
}
|
||||
|
||||
#next-step {
|
||||
background-image: url("~@/assets/icons/next-step.svg");
|
||||
background-image: url(~@/assets/icons/next-step.svg);
|
||||
}
|
||||
|
||||
#play {
|
||||
background-image: url("~@/assets/icons/play.svg");
|
||||
background-image: url(~@/assets/icons/play.svg);
|
||||
}
|
||||
|
||||
#pause {
|
||||
background-image: url("~@/assets/icons/pause.svg");
|
||||
background-image: url(~@/assets/icons/pause.svg);
|
||||
}
|
||||
|
||||
.control-button:hover {
|
||||
@@ -225,3 +234,274 @@ header {
|
||||
opacity: 0.1;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.empty-graph-cont {
|
||||
position: absolute;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.render-area {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.inaccessible {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.adjacency_matrix-cont {
|
||||
position: absolute;
|
||||
background-color: #f3f3f3;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.adjacency_matrix {
|
||||
padding: 48px 64px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: -webkit-max-content;
|
||||
height: -moz-max-content;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.matrix-icon {
|
||||
background-image: url(~@/assets/icons/matrix.svg);
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
background-image: url(~@/assets/icons/info.svg);
|
||||
}
|
||||
|
||||
.help-icon {
|
||||
background-image: url(~@/assets/icons/help.svg);
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
background-image: url(~@/assets/icons/close.svg);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.6;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
.menu-icon:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.adjacency_matrix-menu {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 52px;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-right: 36px;
|
||||
}
|
||||
|
||||
.header-matrix {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.popup-cont {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
padding: 48px 64px;
|
||||
background: rgb(0 0 0 / 60%);
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.version {
|
||||
color: gray;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.popup {
|
||||
margin: auto;
|
||||
padding: 32px 28px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
height: -webkit-max-content;
|
||||
height: -moz-max-content;
|
||||
height: max-content;
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.popup-text {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.popup-el {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.popup-el:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gray {
|
||||
color: #b8b8b8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.menu-prompt, .prompt {
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
visibility: hidden;
|
||||
height: 12px;
|
||||
/* margin-top: -2px; */
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
color: rgb(255 255 255);
|
||||
font-weight: 500;
|
||||
background: rgb(56 58 63);
|
||||
border-radius: 4px;
|
||||
opacity: 0;
|
||||
box-shadow: 0px 1px 5px 1px 0px 1px 5px 1px rgb(56 58 63 / 35%);
|
||||
transition: .2s;
|
||||
display: block;
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.menu-prompt {
|
||||
margin-left: 8px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.menu-prompt::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: -14px;
|
||||
top: 7px;
|
||||
border: 8px solid;
|
||||
border-color: transparent rgb(56 58 63) transparent transparent;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
transform: translate(-50%, 0);
|
||||
left: 50%;
|
||||
top: -100%;
|
||||
margin: -6px auto;
|
||||
}
|
||||
|
||||
.prompt::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
border: 8px solid;
|
||||
border-color: rgb(56 58 63) transparent transparent transparent;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.menu-icon:hover .menu-prompt, .control-button:hover .prompt {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition-delay: .5s;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: rgb(255, 58, 58);
|
||||
color: white;
|
||||
display: flex;
|
||||
padding: 12px 16px;
|
||||
border-radius: 6px;
|
||||
width: max-content;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
box-shadow: 0px 1px 5px 1px rgb(56 58 63 / 15%);
|
||||
}
|
||||
|
||||
.popup-el.popup-button-cont {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.popup-button {
|
||||
padding: 6px 12px;
|
||||
margin-right: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main-popup-button {
|
||||
padding: 10px 14px;
|
||||
border: 1px solid;
|
||||
border-radius: 28px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hints {
|
||||
user-select: none;
|
||||
z-index: 0;
|
||||
color: gray;
|
||||
font-size: 14px;
|
||||
}
|
||||
Reference in New Issue
Block a user