move css files
This commit is contained in:
joneugster
@@ -0,0 +1,145 @@
|
||||
/* variables */
|
||||
|
||||
:root {
|
||||
--clr-primary: #1976d2;
|
||||
--clr-primary-dark: #104a83;
|
||||
--clr-light-gray: #ddd;
|
||||
--clr-dark-gray: #aaa;
|
||||
--clr-darker-gray: #555;
|
||||
--ff-primary: Roboto;
|
||||
}
|
||||
|
||||
|
||||
/* General styling */
|
||||
|
||||
body {
|
||||
font-family: var(--ff-primary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
color: rgba(0, 32, 90, 0.87);
|
||||
background-color: rgba(223, 227, 234);
|
||||
font-size: 85%;
|
||||
border-radius: .3em;
|
||||
padding-left: .3em;
|
||||
padding-right: .3em;
|
||||
}
|
||||
|
||||
.markdown pre code {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown pre {
|
||||
padding-top: .6em;
|
||||
padding-bottom: .6em;
|
||||
padding-left: .3em;
|
||||
overflow: auto;
|
||||
line-height: 1.45;
|
||||
color: rgba(0, 32, 90, 0.87);
|
||||
background-color: rgba(223, 227, 234);
|
||||
border-radius: .3em;
|
||||
}
|
||||
|
||||
|
||||
/* Hide monaco editor notifications */
|
||||
.monaco-workbench > .notifications-toasts.visible {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.loading {
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
line-height: inherit;
|
||||
text-decoration: none;
|
||||
background: var(--clr-primary);
|
||||
color: white;
|
||||
display: inline-block;
|
||||
border-radius: 0.2em;
|
||||
padding: 0.2rem .6em;
|
||||
font-size: 1rem;
|
||||
margin: 0 .2em;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-inverted {
|
||||
color: var(--clr-primary);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.btn-inverted:hover {
|
||||
color: var(--clr-primary-dark);
|
||||
}
|
||||
|
||||
.btn-disabled, .btn[disabled] {
|
||||
color: var(--clr-dark-gray);
|
||||
background: var(--clr-light-gray);
|
||||
}
|
||||
|
||||
.btn-inverted.btn-disabled, .btn-inverted.btn[disabled] {
|
||||
color: var(--clr-dark-gray);
|
||||
background: white;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* App Bar */
|
||||
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-bar {
|
||||
flex: 0;
|
||||
background: var(--clr-primary);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 1.1em;
|
||||
filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.app-bar-title, .app-bar-subtitle {
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
font-size: 1.3rem;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
/* margin: 0 1em; */
|
||||
}
|
||||
|
||||
.app-content {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.markdown li ul, .markdown li ol {
|
||||
margin:0 1.5em;
|
||||
}
|
||||
|
||||
.markdown ul, .markdown ol {
|
||||
margin:0 1.5em 1.5em 1.5em;
|
||||
}
|
||||
|
||||
.privacy-policy {
|
||||
z-index: 10;
|
||||
}
|
||||
@@ -0,0 +1,201 @@
|
||||
|
||||
.message {
|
||||
margin: 10px 0;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
}
|
||||
.message.information, .message.info {
|
||||
/* color: #059; */
|
||||
color: #000;
|
||||
background-color: #DDF6FF;
|
||||
}
|
||||
.message.warning {
|
||||
color: #9F6000;
|
||||
background-color: #FEEFB3;
|
||||
}
|
||||
.message.error {
|
||||
color: #D8000C;
|
||||
background-color: #FFBABA;
|
||||
}
|
||||
|
||||
.message.deleted-hint {
|
||||
background-color: #eee;
|
||||
color: #777;
|
||||
box-shadow: .0em .0em .5em .2em #eee;
|
||||
}
|
||||
|
||||
.hyp-group {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.hyp-group-title, .goal-title {
|
||||
font-family: var(--ff-primary);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.goals-section-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.level-completed {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.typewriter {
|
||||
background: var(--clr-primary);
|
||||
padding: 0.5em;
|
||||
font-family: var(--ff-primary);
|
||||
border-radius: 0.2em;
|
||||
/* margin: 0.2em 0 0; */
|
||||
}
|
||||
|
||||
.typewriter.disabled{
|
||||
background: #bbb;
|
||||
}
|
||||
|
||||
.typewriter.disabled .btn-inverted,
|
||||
.typewriter.disabled .mtk1 {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.typewriter.disabled .typewriter-input-wrapper,
|
||||
.typewriter.disabled .monaco-editor,
|
||||
.typewriter.disabled .monaco-editor-background,
|
||||
.typewriter.disabled .btn-inverted {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.typewriter form {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.typewriter button, .undo-button {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.typewriter .typewriter-input-wrapper{
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
padding: 0.4em .6em 0;
|
||||
font-size: 1rem;
|
||||
background: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.typewriter-interface .proof .MuiCircularProgress-root {
|
||||
left: 50%;
|
||||
position: relative;
|
||||
margin-left: -20px;
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
|
||||
.typewriter .typewriter-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Turn off some monaco decorations: */
|
||||
.typewriter-input .monaco-editor .view-overlays .current-line {
|
||||
border: 0;
|
||||
}
|
||||
.typewriter-input .monaco-editor .scroll-decoration {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.other-goals .goals-section-title, .other-goals summary, .other-goals summary .font-code {
|
||||
color: #5191d1;
|
||||
}
|
||||
|
||||
.goals-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.goals-section div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#current-proof, #main-assumptions {
|
||||
margin-right: 0.8em;
|
||||
}
|
||||
|
||||
#current-proof, #other-goals {
|
||||
margin-left: 0.8em;
|
||||
}
|
||||
|
||||
.proof-display {
|
||||
max-height: 6em;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior-y: contain;
|
||||
scroll-snap-type: y proximity;
|
||||
color: #ccc;
|
||||
|
||||
}
|
||||
|
||||
.proof-display div:nth-last-child(4) {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.proof-display div:nth-last-child(3) {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.proof-display div:nth-last-child(2) {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.proof-display div:nth-last-child(1) {
|
||||
color: #000;
|
||||
scroll-snap-align: end;
|
||||
}
|
||||
|
||||
.proof-display-wrapper {
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 1em;
|
||||
padding: 0.6em;
|
||||
}
|
||||
|
||||
|
||||
/* Push the goals to the bottom for now, until we insert the proof history above. */
|
||||
.typewriter-interface .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* TODO this is in the wrong file */
|
||||
.chat {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.typewriter-interface .content .tmp-pusher {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.exercise .command {
|
||||
background-color: #bbb;
|
||||
padding: .5em;
|
||||
border-radius: .2em;
|
||||
/* TODO: It seems my browsers merge the margings of the proof steps,
|
||||
so that it only shows once 0.5rem instead of twice. Thus have 1.5 here now.
|
||||
*/
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.exercise .command-text {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
font-family: "Droid Sans Mono", "monospace", monospace;
|
||||
font-size: 14px;
|
||||
padding: 0.4em .6em 0;
|
||||
}
|
||||
|
||||
.undo-button {
|
||||
color: #888;
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
.inventory, .documentation {
|
||||
padding: 0 1em 1em 1em;
|
||||
}
|
||||
|
||||
.inventory h2, .documentation h2, .documentation h1 {
|
||||
font-size: 1.5em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: .2em;
|
||||
}
|
||||
|
||||
.documentation h1 {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.documentation.hidden {
|
||||
display: none;
|
||||
transition: display 2s;
|
||||
}
|
||||
|
||||
.inventory-list {
|
||||
display: flex;
|
||||
gap: .5em;
|
||||
flex-wrap : wrap;
|
||||
}
|
||||
|
||||
.inventory .item {
|
||||
background: #fff;
|
||||
border: solid 1px #777;
|
||||
padding: .1em .5em;
|
||||
}
|
||||
|
||||
.inventory .item.locked {
|
||||
border: solid 1px #ccc;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.inventory .item.disabled {
|
||||
color: #d92c2c;
|
||||
}
|
||||
|
||||
.inventory .item.new {
|
||||
background-color: rgb(255, 242, 190);
|
||||
}
|
||||
|
||||
.inventory .item:not(.locked), .inventory .item.enabled {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
border-bottom: 0.1em solid var(--clr-dark-gray);
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.tab {
|
||||
color: var(--clr-darker-gray);
|
||||
line-height: inherit;
|
||||
text-decoration: none;
|
||||
padding: 0.2rem .6em;
|
||||
font-size: 1rem;
|
||||
margin: 0 .1em;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tab-bar.current .tab.active {
|
||||
color: black;
|
||||
border-bottom: 0.3em solid var(--clr-primary);
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: black;
|
||||
border-bottom: 0.3em solid #999;
|
||||
}
|
||||
@@ -0,0 +1,223 @@
|
||||
/* @font-face {
|
||||
font-family: 'Roboto Slab';
|
||||
src: url('data/font/RobotoSlab.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
} */
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@viewport {
|
||||
width: device-width ;
|
||||
zoom: 1.0 ;
|
||||
}
|
||||
|
||||
.landing-page {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.game-list {
|
||||
display: grid;
|
||||
grid-gap: 40px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 440px) {
|
||||
.game-list {
|
||||
grid-template-columns: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
.game {
|
||||
cursor: pointer;
|
||||
border: 1px solid rgb(140, 140, 140);
|
||||
border-radius: 20px;
|
||||
box-shadow: 5px 5px 8px rgb(140, 140, 140);
|
||||
max-width: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-self: center;
|
||||
font-size: 1rem;
|
||||
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
div.image {
|
||||
background: rgb(29,0,36);
|
||||
background: linear-gradient(137deg, rgba(97,9,121,1) 0%, rgba(0,212,255,1) 100%);
|
||||
}
|
||||
|
||||
.game .wrapper > :not(.image), .game .info {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.short-description p, .info p {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
|
||||
}
|
||||
|
||||
.short-description {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
height: 6.5rem;
|
||||
}
|
||||
.game-stats {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
/* width: calc(100% - 20px); */
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.info tr {
|
||||
border-top: 1px solid rgb(200, 200, 200);
|
||||
border-bottom: 1px solid rgb(200, 200, 200);
|
||||
}
|
||||
|
||||
.info td {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.info td:nth-child(even) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
header {
|
||||
background-repeat: none;
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#main-title {
|
||||
padding: 20px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#main-title h1 {
|
||||
font-weight: bolder;
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: calc(1.425rem + 2.1vw);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#main-title p {
|
||||
color: rgb(255, 255, 255);
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
#main-title a {
|
||||
color: rgb(255, 255, 255);
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
#main-title a:hover {
|
||||
color: rgb(218, 218, 218);
|
||||
}
|
||||
|
||||
#main-title i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
header nav {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 8px;
|
||||
background-color: rgba(0, 133, 162, .7);
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: rgba(0, 133, 162, 1);
|
||||
/* display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end; */
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
footer .link {
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
margin-left: 40px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.github-link {
|
||||
height: 24px; /* TODO: why do I need that? s*/
|
||||
}
|
||||
|
||||
.landing-page > section {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
font-size: 1.25rem;
|
||||
|
||||
}
|
||||
|
||||
.landing-page > section h2 {
|
||||
font-size: calc(1.325rem + 0.9vw);
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.landing-page > section:nth-of-type(odd) {
|
||||
background-color: rgb(248, 249, 250)
|
||||
}
|
||||
|
||||
.landing-page > section:nth-of-type(even) {
|
||||
background-color: rgb(255, 255, 255)
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300px) {
|
||||
.landing-page > section .wrapper {
|
||||
max-width: 1300px;
|
||||
margin-left: calc(50% - 650px);
|
||||
margin-right: calc(50% - 650px);
|
||||
}
|
||||
}
|
||||
|
||||
/* TODO: Adjust to 180px once there are more than two games */
|
||||
@media screen and (min-width: 1300px) {
|
||||
.game-list {
|
||||
max-width: 1300px;
|
||||
margin-left: calc(50% - 650px);
|
||||
margin-right: calc(50% - 650px);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,346 @@
|
||||
.level-mobile {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
/* display: flex; */
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gutter {
|
||||
background-color: #eee;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
}
|
||||
|
||||
.gutter.gutter-vertical {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
|
||||
}
|
||||
|
||||
.gutter.gutter-horizontal {
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
|
||||
}
|
||||
|
||||
.inventory-panel, .exercise-panel, .doc-panel, .introduction-panel {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.infoview {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.infoview, .exercise-statement {
|
||||
padding-left: .5em;
|
||||
padding-right: .5em;
|
||||
}
|
||||
|
||||
.exercise-statement {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.exercise-statement p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.exercise-statement .lean-code {
|
||||
color: rgba(0, 32, 90, 0.87);
|
||||
font-size: 12px; /* TODO: is the monaco font-size hardcoded? */
|
||||
}
|
||||
|
||||
.conclusion {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.infoview {
|
||||
padding-top: 0em;
|
||||
}
|
||||
|
||||
.exercise {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.codeview {
|
||||
flex: 1 1 auto;
|
||||
min-height: 192px;
|
||||
|
||||
}
|
||||
|
||||
.exercise h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.input-mode-switch {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.doc-panel {
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.doc-panel li {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12); /* This should be teh same colour as `divider` in Inventory.tsx */
|
||||
}
|
||||
|
||||
.doc-panel li:first-of-type {
|
||||
border-top: 1px solid rgb(0, 0, 0, 0.12); /* This should be teh same colour as `divider` in Inventory.tsx */
|
||||
}
|
||||
|
||||
/* fix as Mui seems to set this to `nowrap`. */
|
||||
.MuiAccordionDetails-root {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
/* TODO: Adjust Mathjax styling. 1em vertical is excessive. */
|
||||
mjx-container[jax="CHTML"][display="true"] {
|
||||
margin: 0.2em 0 !important;
|
||||
}
|
||||
|
||||
|
||||
/* Styling tables for Markdown */
|
||||
.chat-panel table, .chat-panel th, .chat-panel td {
|
||||
/* border: 1px solid rgb(0, 0, 0, 0.12); */
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.chat-panel th, .chat-panel td {
|
||||
padding-left: .5em;
|
||||
padding-right: .5em;
|
||||
}
|
||||
|
||||
span.katex-display {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p, table {
|
||||
margin-block-start: 1em;
|
||||
margin-block-end: 1em;
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-end: 0px;
|
||||
}
|
||||
|
||||
/* Prevent white spaces break inside a table. */
|
||||
td code {
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
/* Styling in the editor while typing abbreviations such as "\alpha" */
|
||||
.abbreviation {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Styling in the left margin of the editor when processing */
|
||||
.processing {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(255, 165, 0, 1) 0%,
|
||||
rgba(255, 165, 0, 1) 30%,
|
||||
transparent 30%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Styling in the left margin of the editor on error */
|
||||
.glyph-margin-error {
|
||||
background: rgba(255, 0, 0, 1);
|
||||
}
|
||||
|
||||
/***************************************/
|
||||
/* TODO: For development purposes only */
|
||||
/***************************************/
|
||||
/* .doc-panel {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.main-panel {
|
||||
border: 1px solid rgb(41, 112, 0);
|
||||
}
|
||||
|
||||
.info-panel {
|
||||
border: 1px solid rgb(230, 122, 0);
|
||||
}
|
||||
|
||||
.chat-panel {
|
||||
border: 1px solid rgb(192, 18, 178);
|
||||
}
|
||||
|
||||
.exercise {
|
||||
border: 1px solid rgb(102, 243, 67);
|
||||
}
|
||||
|
||||
.codeview {
|
||||
border: 1px solid rgb(98, 148, 255);
|
||||
}
|
||||
|
||||
.main-grid {
|
||||
border: 1px solid rgb(255, 0, 0);
|
||||
margin: 1px;
|
||||
} */
|
||||
|
||||
.exercise {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chat {
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
margin-left: .5em;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.chat-panel {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.chat-panel .button-row {
|
||||
/* width:100%; */
|
||||
margin-left: .5em;
|
||||
margin-right: .5em;
|
||||
min-height: 2.5em;
|
||||
border-top: 0.1em solid #aaa;
|
||||
}
|
||||
|
||||
.chat-panel .btn {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-left: .5rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
/* .exercise-panel {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
} */
|
||||
|
||||
.typewriter-interface {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.typewriter {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.typewriter-interface .content {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: scroll;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.exercise .step {
|
||||
/* background-color: #e6f0f4; */
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
/* border: 3px dotted rgb(88, 131, 24); */
|
||||
}
|
||||
|
||||
/* TODO: Is this still used anywhere? */
|
||||
.exercise .step .btn-help {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.chat .message {
|
||||
margin-left: .5em;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.chat .recent {
|
||||
box-shadow: .0em .0em .4em .1em #8cbbe9;
|
||||
}
|
||||
|
||||
.exercise .step.selected .goal-tabs, .chat .selected {
|
||||
/* border: 3px solid #5191d1; */
|
||||
box-shadow: .0em .0em .4em .1em var(--clr-primary);
|
||||
}
|
||||
|
||||
.introduction-panel {
|
||||
max-width: 900px;
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.impressum {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.menu.dropdown {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
background-color: #fff;
|
||||
z-index: 1;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: -.1rem .3rem .3rem 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.menu.dropdown.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu-btn {
|
||||
padding: 0;
|
||||
font-size: 1.3rem;
|
||||
margin-left: .5em;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#home-btn {
|
||||
margin-right: .5em;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.menu.dropdown .svg-inline--fa {
|
||||
width: 1.8rem;
|
||||
}
|
||||
|
||||
.tmp-pusher {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.typewriter-interface .content, .world-image-container.empty {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.typewriter-interface .proof {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.toggle-width {
|
||||
min-width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
|
||||
/* Reset, roughly following https://piccalil.li/blog/a-modern-css-reset/ */
|
||||
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Remove default margin */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||
ul[role='list'],
|
||||
ol[role='list'] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
min-height: 100vh;
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
text-decoration-style: dotted;
|
||||
color: var(--clr-primary);
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
img,
|
||||
picture {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html:focus-within {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
|
||||
/* svg .world-circle {
|
||||
fill: var(--clr-primary)
|
||||
} */
|
||||
|
||||
.welcome {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.welcome.mobile .column {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.welcome .column {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: .67em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.1em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h5, h6 {
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/******************/
|
||||
/* Privacy Button */
|
||||
/******************/
|
||||
|
||||
.privacy {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 25px;
|
||||
border-radius: 20px;
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
color: #aaa;
|
||||
background-color: #eee;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.privacy p {
|
||||
position: absolute;
|
||||
color: #888;
|
||||
bottom: 1.5px;
|
||||
font-size: 6px;
|
||||
}
|
||||
|
||||
.privacy .p1 {
|
||||
transform: rotate(50deg);
|
||||
left: 1.5px;
|
||||
}
|
||||
|
||||
.privacy .p2 {
|
||||
transform: rotate(-50deg);
|
||||
right: 1.5px;
|
||||
}
|
||||
|
||||
/*****************/
|
||||
/* Privacy Popup */
|
||||
/*****************/
|
||||
|
||||
.modal-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.modal h2 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
min-width: max(50%, 300px);
|
||||
max-width: 60ch;
|
||||
max-height: 80%;
|
||||
overflow: scroll;
|
||||
background: #fff;
|
||||
z-index: 3;
|
||||
padding: 2em;
|
||||
border-radius: 1em;
|
||||
text-align: left;
|
||||
color: var(--vscode-breadcrumb-foreground);
|
||||
}
|
||||
|
||||
.modal input[type="text"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal .form-error {
|
||||
color: #a00;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal input[type="submit"] {
|
||||
border: none;
|
||||
color: var(--vscode-button-foreground);
|
||||
background: var(--vscode-button-background);
|
||||
cursor: pointer;
|
||||
padding: .5em 1em;
|
||||
border-radius: .2em;
|
||||
display: block;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
float: right;
|
||||
scale: 2;
|
||||
color: var(--vscode-breadcrumb-foreground);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
float: right;
|
||||
scale: 2;
|
||||
color: var(--vscode-breadcrumb-focusForeground);
|
||||
}
|
||||
|
||||
.modal table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal a.download-link {
|
||||
cursor: pointer;
|
||||
font-style: italic;
|
||||
text-decoration: underline dotted;
|
||||
|
||||
}
|
||||
|
||||
.mobile-nav .svg-inline--fa {
|
||||
margin-left: 0.3rem;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
svg .world-title-wrapper, svg .level-title-wrapper div {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
svg .world-title-wrapper div, svg .level-title-wrapper div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
svg .world-title-wrapper div, svg .level-title-wrapper div {
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
overflow: visible;
|
||||
|
||||
}
|
||||
|
||||
svg .world-title, svg .level-title {
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
svg .world-title {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
svg .level-title {
|
||||
font-weight: 400;
|
||||
opacity: 0;
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
||||
svg .level:hover .level-title {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
svg .disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.world-selection {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 2em;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.world-selection-menu {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
/* margin: 1em; */
|
||||
/* border: 1px solid var(--clr-primary); */
|
||||
border: 1px solid var(--clr-primary);
|
||||
background-color: #fff;
|
||||
border-radius: .5em;
|
||||
filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.5));
|
||||
}
|
||||
|
||||
.world-selection-menu .btn, .welcome .btn {
|
||||
min-width: 5em;
|
||||
text-align: center;
|
||||
margin-left: .4em;
|
||||
margin-right: .4em;
|
||||
margin-bottom: .2em;
|
||||
}
|
||||
|
||||
.world-selection-menu .slider-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* width: 100%; */
|
||||
height: 7em;
|
||||
/* min-width: 16em; */
|
||||
padding: .5em 1em 1.3em 1em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.difficulty-label {
|
||||
/* font-size: 0.875em; */
|
||||
padding-bottom: 1.2em;
|
||||
}
|
||||
|
||||
/* Test for mobile `title`s */
|
||||
/* @media (pointer: coarse), (hover: none) {
|
||||
[title] {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
[title]:focus::after {
|
||||
content: attr(title);
|
||||
position: absolute;
|
||||
top: 90%;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border: 1px solid;
|
||||
width: fit-content;
|
||||
padding: 3px;
|
||||
}
|
||||
} */
|
||||
|
||||
.world-label {
|
||||
/* border: 2px solid purple; */
|
||||
padding: .2em;
|
||||
border-radius: .5em;
|
||||
}
|
||||
|
||||
.world-selection-menu .helpButton {
|
||||
position: absolute;
|
||||
right: .5em;
|
||||
top: .5em;
|
||||
color: var(--clr-primary);
|
||||
}
|
||||
Reference in New Issue
Block a user