diff --git a/web/assets/css/style.css b/web/assets/css/style.css index 3fee0c3..a6a6a88 100644 --- a/web/assets/css/style.css +++ b/web/assets/css/style.css @@ -4,17 +4,22 @@ html, body { padding: 0; background-color: #000000; color: #ffffff; - font-family: "Source Code Pro", monospace; + font-family: 'Source Code Pro', monospace; } + html.embedded .navigation, body.embedded .navigation { display: none; } + html.embedded .container, body.embedded .container { margin: 0; } + html.embedded #content, html.embedded #linenos, body.embedded #content, body.embedded #linenos { padding-top: 10px; + min-height: calc(100vh - 50px); } + html.embedded #footer, body.embedded #footer { font-size: 0.8em; } @@ -55,6 +60,7 @@ html.embedded #footer, body.embedded #footer { transform: translate3d(-50%, -50%, 0) rotate(360deg); } } + @keyframes spinner { 0% { -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg); @@ -65,6 +71,7 @@ html.embedded #footer, body.embedded #footer { transform: translate3d(-50%, -50%, 0) rotate(360deg); } } + #spinner-container { position: fixed; top: 130px; @@ -72,9 +79,10 @@ html.embedded #footer, body.embedded #footer { height: 50px; width: 50px; } + #spinner-container .spinner { - -webkit-animation: 0.75s linear infinite spinner; - animation: 0.75s linear infinite spinner; + -webkit-animation: .75s linear infinite spinner; + animation: .75s linear infinite spinner; -webkit-animation-play-state: inherit; animation-play-state: inherit; border: solid 5px #ffffff; @@ -92,12 +100,16 @@ html.embedded #footer, body.embedded #footer { bottom: 60px; right: 30px; } + #btn_report svg { + -webkit-transition: all 250ms; transition: all 250ms; } + #btn_report:hover { cursor: pointer; } + #btn_report:hover svg { stroke: #2daa57; } @@ -106,34 +118,51 @@ html.embedded #footer, body.embedded #footer { position: fixed; top: 0; width: calc(100vw - 80px); + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; padding: 0 40px; background-color: #222222; } + .navigation .button { padding: 10px 20px; background-color: transparent; border: none; outline: none; } + .navigation .button svg { + -webkit-transition: all 250ms; transition: all 250ms; } + .navigation .button.active svg { stroke: #2daa57; } + .navigation .button:hover { cursor: pointer; } + .navigation .button:hover svg { stroke: #2daa57; } + .navigation .button:disabled svg { stroke: #5a5a5a; } + .navigation .button:disabled:hover { cursor: initial; color: initial; @@ -141,9 +170,15 @@ html.embedded #footer, body.embedded #footer { .container { margin-top: 60px; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } + .container #linenos { padding: 20px 0; width: 50px; @@ -151,25 +186,31 @@ html.embedded #footer, body.embedded #footer { background-color: #111111; color: #bebebe; } + .container #linenos span { display: block; width: 100%; height: 20px; text-align: center; } + .container #linenos span:last-child { margin-bottom: 25px; } + .container #content { - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; padding: 20px; width: calc(100vw - 50px); } + .container #content #code { white-space: pre; line-height: 20px; overflow-x: auto; } + .container #content #input { height: 100%; width: 100%; @@ -182,24 +223,29 @@ html.embedded #footer, body.embedded #footer { font: inherit; line-height: 20px; } + .container #notifications { position: fixed; bottom: 30px; right: 0; padding: 20px; } + .container #notifications div { border-radius: 10px; width: 500px; margin-top: 20px; padding: 20px 30px; } + .container #notifications div.error { background-color: #ff4d4d; } + .container #notifications div.success { background-color: #389b38; } + .container #notifications div:first-child { margin-top: 0; } @@ -211,28 +257,43 @@ html.embedded #footer, body.embedded #footer { width: 100%; background-color: #222222; } + #footer #flex { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; margin: 0 80px 0 60px; } + #footer div { display: inline-block; } + #footer a { display: inline-block; text-decoration: none; color: #ffffff; padding: 5px 20px; height: 100%; + -webkit-transition: all 200ms; transition: all 200ms; } + #footer a:hover { background-color: #333333; color: #2daa57; } + #footer #version { display: inline-block; margin-left: 10px; @@ -255,7 +316,6 @@ html.embedded #footer, body.embedded #footer { .navigation .meta #version { display: none; } - .container #notifications { padding: 0; } @@ -263,9 +323,9 @@ html.embedded #footer, body.embedded #footer { margin: 0; border-radius: 0; width: 100vw; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } - #footer #flex { margin: 0 0 0 25px; } @@ -276,14 +336,15 @@ html.embedded #footer, body.embedded #footer { padding: 5px 15px; } } + @media only screen and (max-width: 500px) { #footer #flex { margin: 0; - justify-content: space-around; + -ms-flex-pack: distribute; + justify-content: space-around; } #footer .version-container { display: none; } } - -/*# sourceMappingURL=style.css.map */ +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/web/assets/css/style.css.map b/web/assets/css/style.css.map index 4919a37..329df7f 100644 --- a/web/assets/css/style.css.map +++ b/web/assets/css/style.css.map @@ -1 +1,9 @@ -{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAQ;AAER;EACI;EACA;EACA;EACA;EACA;;AAKI;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAIJ;EACI;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;IACI;IACQ;;EAEZ;IACI;IACQ;;;AAGhB;EACI;IACI;IACQ;;EAEZ;IACI;IACQ;;;AAGhB;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACI;EACJ;EACQ;EACR;EACA;EACA;EACA;EACA;EACA;EACQ;EACR;;;AAIR;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;AACA;EACI;;;AAKZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AACA;EACI;;AAIJ;EACI;;AAEJ;EACI;EACA;;;AAMhB;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AAIZ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAMhB;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;;;AAIR;EACI;IACI;IACA;;EACA;IACI;;EACA;IACI;IACA;;EAGR;IACI;;;EAIR;IACI;;EACA;IACI;IACA;IACA;IACA;;;EAMJ;IACI;;EAEJ;IACI;;EAEJ;IACI;;;AAKZ;EAEQ;IACI;IACA;;EAEJ;IACI","file":"style.css"} \ No newline at end of file +{ + "version": 3, + "mappings": "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", + "sources": [ + "style.scss" + ], + "names": [], + "file": "style.css" +} \ No newline at end of file diff --git a/web/assets/css/style.scss b/web/assets/css/style.scss index 0a291ee..28ee91b 100644 --- a/web/assets/css/style.scss +++ b/web/assets/css/style.scss @@ -6,23 +6,17 @@ html, body { background-color: #000000; color: #ffffff; font-family: 'Source Code Pro', monospace; - - // Enables embedded mode (iframes). &.embedded { - // Hide navbar. .navigation { display: none; } - // Align content with top of the frame. .container { margin: 0; } - // Adjust paddings to have more space. #content, #linenos { padding-top: 10px; + min-height: calc(100vh - 50px); } - // Make footer smaller to further increase - // content real estate. #footer { font-size: 0.8em; }