Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/chrisvander/existential-graphs. Cross-platform React app for solving existential graph-based proofs
Something went wrong. Try again.
5.0 kB · 254 lines
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254@import '../colors';
.canvas { width: 100vw; height: 100vh;}
.abs { display: absolute;}
.noselect { outline: none; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */}
.toolbox { position: absolute; display: inline-block; width: 200px; float: left; background-color: $white-gray; margin: 20px; border-radius: 25px; padding: 15px; padding-left: 10px; padding-right: 10px; box-shadow: 0 0px 7px rgba(0,0,0,0.16), 0 2px 2px rgba(0,0,0,0.24); z-index: 1; h3 { margin-left: 5px; }}
.goal-container { position: absolute; display: inline-block; min-width: 130px; right: 0; text-align: center; background-color: white; margin: 20px; border-radius: 25px; padding: 10px; box-shadow: 0 0px 7px rgba(0,0,0,0.16), 0 2px 2px rgba(0,0,0,0.24); z-index: 1; .red { font-weight: bold; color: $black; } .green { font-weight: bold; color: green; }}
.tool { background-color: #DFDFDA; border-radius: 15px; padding: 4px; margin-top: 5px; padding-left: 16px; &:hover { background-color: #DADACA; cursor: pointer; }}
.hoverEl { padding: 5px; border-radius: 10px; cursor: pointer; &:hover { background-color: $tan; }}
.step-text { height: 22px; color: #848484; font-family: "Open Sans"; font-size: 16px; line-height: 22px; text-align: center; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 20px;}
.step-menu { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 53px; box-sizing: border-box; height: 73px; line-height: 73px; width: 278px; border-radius: 36.5px; background-color: #EAEAEA; border: 1px solid #E6E6E6; box-shadow: 0 0 8px 0 rgba(0,0,0,0.28); text-align: center; div { display: inline-block; margin-top: 2.6px; margin-left: 16px; &:first-child { margin-left: 0; } } .undo-btn.disabled { background-color: #C3CBC2 !important; box-shadow: none !important; .undo-svg svg path { fill: rgb(134,134,134); } cursor: not-allowed !important; } .redo-btn.disabled { background-color: #B7B7B7 !important; box-shadow: none !important; .redo-svg svg path { fill: rgb(134,134,134); } cursor: not-allowed !important; } .undo-btn { width: 60px; height: 60px; background-color: #A8B4A7; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.24); border-radius: 50%; position: relative; margin-right: 17px; cursor: pointer; &:hover { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.35); } .undo-svg { margin-top: 0; } } .redo-btn { div { margin-top: 0; } position: absolute; bottom: 3px; right: 100px; background-color: #B7B7B7; border-radius: 50%; line-height: 32px; height: 29px; width: 29px; box-shadow: 0 1px 6px 0 rgba(0,0,0,0.29); cursor: pointer; &:hover { box-shadow: 0 0.5px 3px 0 rgba(0,0,0,0.35); } .redo-svg { margin-top: 0; } }}
.dropdown-menu { width: 100vw; height: 40px; background-color: #EEE; padding-left: 15px; .menu-title { height: 30px; line-height: 30px; padding-left: 10px; padding-right: 10px; border-radius: 8px; float: left; font-weight: bold; margin-top: 5px; margin-bottom: 5px; cursor: pointer; transition: box-shadow 0.2s; &:hover { box-shadow: inset -5px -5px 3px #F5F5F5, inset 5px 5px 3px #DADADA; } &:active { box-shadow: inset -5px -5px 3px #F9F9F9, inset 5px 5px 3px #D4D4D4; background-color: #EBEBEB; } }}
.fadein-appear { opacity: 0.01;}
.fadein-appear.fadein-appear-active { opacity: 1; transition: 1.0s;}
.insertOverlay { border-radius: 25px; padding: 15px; background-color: white; position: absolute; top: -50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0.5px 3px 0 rgba(0,0,0,0.35); transition: top 0.4s; z-index: 2; &.shown { top: 50%; } h1 { font-size: 2.4rem; } .check { width: inherit; height: inherit; padding-top: 10px; padding-bottom: 10px; } .buttons { margin-top: 20px; float: right; button { border-radius: 15px; margin-right: 4px; } }}
.mainCanvas { transition: 0.5s filter ease-in-out, 0.5s -webkit-filter ease-in-out !important; background-color: rgb(255,255,255);}
.mainCanvas.disabled { pointer-events: none; filter: brightness(0.5); backdrop-filter: brightness(0.5);}