diff --git a/LICENSE b/LICENSE index 8dada3e..e45214f 100644 --- a/LICENSE +++ b/LICENSE @@ -186,7 +186,7 @@ same "printed page" as the copyright notice for easier identification within third-party archives. - Copyright {yyyy} {name of copyright owner} + Copyright 2017 Keno Clayton Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. diff --git a/assets/background.png b/assets/background.png new file mode 100644 index 0000000..a5ca291 Binary files /dev/null and b/assets/background.png differ diff --git a/assets/favicon.ico b/assets/favicon.ico new file mode 100644 index 0000000..b4ac4d7 Binary files /dev/null and b/assets/favicon.ico differ diff --git a/assets/rule.png b/assets/rule.png new file mode 100644 index 0000000..2e18cca Binary files /dev/null and b/assets/rule.png differ diff --git a/assets/scripts.js b/assets/scripts.js new file mode 100644 index 0000000..10a4596 --- /dev/null +++ b/assets/scripts.js @@ -0,0 +1,130 @@ +var Embed = Quill.import('blots/embed'); + +//Create a new spoiler class for span tags with class spoiler applied + +class Spoiler extends Embed { + static create(value) { + let node = super.create(value); + node.innerHTML = value; + return node; + } +} + +Spoiler.blotName = 'span'; +Spoiler.className = 'spoiler'; +Spoiler.tagName = 'span'; + +var steamSpoiler = function() { + var customSpan = document.createElement('span'); + var range = quill.getSelection(); + if (range) { + quill.insertEmbed(range.index, "span", customSpan); + } +}; + +Quill.register({ + 'formats/spoiler': Spoiler +}); + +var quill = new Quill('#editor', { + modules: { + toolbar : { container : '#toolbar', + handlers : { + 'spoiler' : steamSpoiler + } + } + }, + placeholder: 'Write your review here!', + theme: 'snow' +}); + +var text = quill.container.firstChild.innerHTML; + +// Enable all tooltips +$('[data-toggle="tooltip"]').tooltip(); + + +quill.on('selection-change', function(range, oldRange, source) { + text = quill.container.firstChild.innerHTML; + convertHTML(text); + if (range) { + $("#editorWindow").addClass("active"); + } else { + $("#editorWindow").removeClass("active"); + } +}); + +quill.on('text-change', function(delta, oldDelta, source) { + text = quill.container.firstChild.innerHTML; + convertHTML(text); +}); + +function convertHTML(convertText) { + //TODO: No Parse, Table + //Process the markup tags + var markupText = convertText.replace(/
/g, '').replace(/<\/p>/g, '\n').replace(//g, '[b]').replace(/<\/strong>/g, '[/b]').replace(/ Your Username 0.0 hrs on record/g, '[h1]').replace(/<\/h1>/g, '[/h1]\n').replace(//g, '[i]').replace(/<\/em>/g, '[/i]').replace(//g, '[u]').replace(/<\/u>/g, '[/u]').replace(/
/g, '[olist]\n').replace(/<\/ol>/g, '[/olist]\n').replace(/
/g, '[list]\n').replace(/<\/ul>/g, '[/list]\n').replace(/
/g, '\n').replace(//g ,']').replace(/<\/a>/g ,'[/url]').replace(//g, '[strike]').replace(/<\/s>/g, '[/strike]').replace(//g, '[quote=author]').replace(/<\/blockquote>/g, '[/quote]\n').replace(//g, '[spoiler]').replace(/<\/span>/g, '[/spoiler]').replace(/
/g, '[code]').replace(/<\/pre>/g, '[/code]\n').replace(/
/g, '[noparse]').replace(/<\/code>/g, '[/noparse]');
+
+ //Process the preview
+ //var previewText = text;
+
+ //Set the markup display
+ $('#markup').html(markupText);
+
+ //Set the preview display
+ $('#preview').html(convertText);
+}
+
+function CopyToClipboard(containerid) {
+ // creating new textarea element and giveing it id 't'
+ let t = document.createElement('textarea')
+ t.id = 't'
+ // Optional step to make less noise in the page, if any!
+ t.style.height = 0
+ // You have to append it to your page somewhere, I chose
+ document.body.appendChild(t)
+ // Copy whatever is in your div to our new textarea
+ t.value = document.getElementById(containerid).innerText
+ // Now copy whatever inside the textarea to clipboard
+ let selector = document.querySelector('#t')
+ selector.select()
+ document.execCommand('copy')
+ // Remove the textarea
+ document.body.removeChild(t)
+ alert("Markup copied to clipboard!");
+};
+
+function pushFooter() {
+ var docHeight = $(window).height();
+ var footerHeight = $('#footer').height();
+ var footerTop = $('#footer').position().top + footerHeight;
+
+ if (footerTop < docHeight) {
+ $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
+ }
+}
+
+//Show Preview
+$('#previewCollapse').on('show.bs.collapse', function() {
+ quill.blur();
+ console.log(text);
+ document.getElementById("showBtn").innerHTML = "Hide Preview";
+});
+
+//Hide Preview
+$('#previewCollapse').on('hide.bs.collapse', function() {
+ document.getElementById("showBtn").innerHTML = "Show Preview";
+ quill.focus();
+});
+
+$('#closeBtn').click(function() {
+ $('#help').fadeOut(1000, function complete() {
+ pushFooter();
+ });
+});
+
+$(document).ready(function () {
+ pushFooter();
+ var fade = $(".fade");
+ fade.css({ "opacity":"0"});
+ fade.fadeTo(500, 1, "swing");
+});
\ No newline at end of file
diff --git a/assets/style.css b/assets/style.css
new file mode 100644
index 0000000..0293f82
--- /dev/null
+++ b/assets/style.css
@@ -0,0 +1,208 @@
+#closeBtn {
+ float: right;
+ margin: 1rem; }
+
+#editorWindow {
+ -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
+ -webkit-transition: box-shadow 0.2s ease;
+ -moz-transition: box-shadow 0.2s ease;
+ -ms-transition: box-shadow 0.2s ease;
+ -o-transition: box-shadow 0.2s ease;
+ transition: box-shadow 0.2s ease;
+ background-color: #fff; }
+ #editorWindow.active {
+ -webkit-box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
+ -moz-box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
+ box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }
+
+#editor {
+ min-height: 13rem; }
+
+.brighter {
+ background-image: url("rule.png");
+ background-position: bottom left;
+ background-repeat: no-repeat;
+ color: #fff;
+ font-size: 17px;
+ letter-spacing: 2px;
+ line-height: 26px;
+ margin: 0 0 10px;
+ text-transform: uppercase; }
+
+.btn {
+ cursor: pointer;
+ border-color: #000; }
+
+.btn-primary {
+ background: #2f89bc 5%;
+ background: linear-gradient(180deg, #2f89bc 5%, #17435c 95%);
+ background: -webkit-linear-gradient(legacy-direction(180deg, #2f89bc 5%, #17435c 95%));
+ color: #A4D7F5; }
+ .btn-primary:hover {
+ background: #66c0f4;
+ background: linear-gradient(180deg, #66c0f4 5%, #2f89bc 95%);
+ background: -webkit-linear-gradient(legacy-direction(180deg, #66c0f4 5%, #2f89bc 95%));
+ color: #fff;
+ text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3); }
+
+.btn-success {
+ background: #799905 5%;
+ background: linear-gradient(180deg, #799905 5%, #536904 95%);
+ background: -webkit-linear-gradient(legacy-direction(180deg, #799905 5%, #536904 95%));
+ color: #D2E885; }
+ .btn-success:hover {
+ background: #799905;
+ background: linear-gradient(180deg, #799905 5%, #536904 95%);
+ background: -webkit-linear-gradient(legacy-direction(180deg, #799905 5%, #536904 95%));
+ color: #fff;
+ text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3); }
+
+.display-4 {
+ -webkit-transition: color 0.3s ease;
+ -moz-transition: color 0.3s ease;
+ -ms-transition: color 0.3s ease;
+ -o-transition: color 0.3s ease;
+ transition: color 0.3s ease;
+ color: #b8b6b4; }
+ .display-4:hover {
+ color: #eee; }
+
+.editor-toolbar {
+ text-align: center; }
+
+.fa-inverse {
+ background: #2f89bc 5%;
+ background: linear-gradient(180deg, #2f89bc 5%, #17435c 95%);
+ background: -webkit-linear-gradient(legacy-direction(180deg, #2f89bc 5%, #17435c 95%));
+ color: black; }
+ .fa-inverse.hide {
+ -webkit-text-fill-color: transparent; }
+
+.fa-lg {
+ font-size: 17px !important; }
+
+.fa-2x {
+ font-size: 20px !important; }
+
+.jumbotron {
+ background-color: #171a21;
+ color: #b8b6b4;
+ font-variant: small-caps;
+ font-family: 'Monserrat', sans-serif;
+ text-shadow: 1px 1px 10px #222;
+ text-align: center; }
+
+.markup, .preview {
+ background-color: #111A24;
+ color: #acb2b8;
+ font-family: "Motiva Sans", Sans-serif;
+ font-size: 13px;
+ line-height: 17px;
+ white-space: pre-line; }
+
+@media only screen and (min-width: 1200px) {
+ .preview {
+ min-width: 400px;
+ max-width: 400px; } }
+.preview {
+ overflow-wrap: break-word;
+ overflow: hidden; }
+ .preview a {
+ color: #ebebeb; }
+ .preview blockquote {
+ border: 1px solid lightblue;
+ border-radius: 5px;
+ padding: 0.8rem;
+ width: 100%; }
+ .preview code {
+ background: transparent;
+ color: #acb2b8; }
+ .preview h1 {
+ color: #5aa9d6;
+ font-size: 15px; }
+ .preview pre {
+ background: transparent;
+ border: 1px solid #555;
+ border-radius: 5px;
+ color: #acb2b8;
+ padding: 0.8rem;
+ width: 100%; }
+
+.preview-container {
+ background-color: #111A24; }
+
+.preview-top {
+ background-color: #111A24;
+ color: #63B7E9; }
+ .preview-top p {
+ color: #8091a2; }
+ .preview-top p.name {
+ color: #c6d4df;
+ font-weight: bold; }
+ .preview-top .next {
+ background: rgba(0, 0, 0, 0.2); }
+
+.recommended {
+ font-size: 16px;
+ color: #d6d7d8; }
+
+.spoiler {
+ background: black;
+ color: #aaa; }
+ .spoiler:hover {
+ color: #eee; }
+
+.ql-editor {
+ line-height: 1.5rem; }
+
+a i {
+ color: white; }
+
+body {
+ background: url("background.png") center top no-repeat #1B2838;
+ font-family: "Motiva Sans", Sans-serif;
+ font-size: 13px;
+ height: 100%;
+ line-height: 1.3rem;
+ min-height: 100%;
+ overflow-wrap: break-word; }
+
+div.container-fluid {
+ padding-left: 0px;
+ padding-right: 0px; }
+div.tutorial {
+ -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
+ background: #e3eaef;
+ background: linear-gradient(180deg, #e3eaef 5%, #c7d5e0 95%);
+ background: -webkit-linear-gradient(legacy-direction(180deg, #e3eaef 5%, #c7d5e0 95%));
+ background-color: #fff;
+ border-radius: 10px 10px;
+ font-size: 19.5px;
+ line-height: 1.95rem;
+ padding: 1.5rem;
+ text-align: center;
+ width: 66.66%; }
+
+footer {
+ background: rgba(0, 0, 0, 0.3);
+ background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
+ background: -webkit-linear-gradient(legacy-direction(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%));
+ color: #b8b6b4;
+ line-height: 1.69rem;
+ margin-top: 3rem;
+ text-align: center;
+ padding: 0.3rem 0; }
+
+textarea {
+ min-height: 15rem;
+ min-width: 60rem;
+ -webkit-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.75);
+ -moz-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.75);
+ box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.75);
+ margin-bottom: 2rem; }
+
+/*# sourceMappingURL=style.css.map */
diff --git a/assets/style.css.map b/assets/style.css.map
new file mode 100644
index 0000000..bb6a39a
--- /dev/null
+++ b/assets/style.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["style.scss"],
+"names": [],
+"file": "style.css"
+}
diff --git a/assets/style.min.css b/assets/style.min.css
new file mode 100644
index 0000000..21e297c
--- /dev/null
+++ b/assets/style.min.css
@@ -0,0 +1 @@
+#closeBtn{float:right;margin:1rem}#editorWindow{-webkit-box-shadow:0 0 3px rgba(0,0,0,.4);-moz-box-shadow:0 0 3px rgba(0,0,0,.4);box-shadow:0 0 3px rgba(0,0,0,.4);-webkit-transition:box-shadow .2s ease;-moz-transition:box-shadow .2s ease;-ms-transition:box-shadow .2s ease;-o-transition:box-shadow .2s ease;transition:box-shadow .2s ease;background-color:#fff}#editorWindow.active{-webkit-box-shadow:0 0 10px rgba(255,255,255,.7);-moz-box-shadow:0 0 10px rgba(255,255,255,.7);box-shadow:0 0 10px rgba(255,255,255,.7)}#editor{min-height:13rem}.brighter{background-image:url(rule.png);background-position:bottom left;background-repeat:no-repeat;color:#fff;font-size:17px;letter-spacing:2px;line-height:26px;margin:0 0 10px;text-transform:uppercase}.btn{cursor:pointer;border-color:#000}.btn-primary{background:#2f89bc 5%;background:linear-gradient(180deg,#2f89bc 5%,#17435c 95%);background:-webkit-linear-gradient(legacy-direction(180deg,#2f89bc 5%,#17435c 95%));color:#A4D7F5}.btn-primary:hover{background:#66c0f4;background:linear-gradient(180deg,#66c0f4 5%,#2f89bc 95%);background:-webkit-linear-gradient(legacy-direction(180deg,#66c0f4 5%,#2f89bc 95%));color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.3)}.btn-success{background:#799905 5%;background:linear-gradient(180deg,#799905 5%,#536904 95%);background:-webkit-linear-gradient(legacy-direction(180deg,#799905 5%,#536904 95%));color:#D2E885}.btn-success:hover{background:#799905;background:linear-gradient(180deg,#799905 5%,#536904 95%);background:-webkit-linear-gradient(legacy-direction(180deg,#799905 5%,#536904 95%));color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.3)}.display-4{-webkit-transition:color .3s ease;-moz-transition:color .3s ease;-ms-transition:color .3s ease;-o-transition:color .3s ease;transition:color .3s ease;color:#b8b6b4}.display-4:hover{color:#eee}.editor-toolbar{text-align:center}.fa-inverse{background:#2f89bc 5%;background:linear-gradient(180deg,#2f89bc 5%,#17435c 95%);background:-webkit-linear-gradient(legacy-direction(180deg,#2f89bc 5%,#17435c 95%));color:#000}.fa-inverse.hide{-webkit-text-fill-color:transparent}.fa-lg{font-size:17px!important}.fa-2x{font-size:20px!important}.jumbotron{background-color:#171a21;color:#b8b6b4;font-variant:small-caps;font-family:Monserrat,sans-serif;text-shadow:1px 1px 10px #222;text-align:center}.markup,.preview{background-color:#111A24;color:#acb2b8;font-family:"Motiva Sans",Sans-serif;font-size:13px;line-height:17px;white-space:pre-line}@media only screen and (min-width:1200px){.preview{min-width:400px;max-width:400px}}.preview{overflow-wrap:break-word;overflow:hidden}.preview a{color:#ebebeb}.preview blockquote{border:1px solid #add8e6;border-radius:5px;padding:.8rem;width:100%}.preview code{background:0 0;color:#acb2b8}.preview h1{color:#5aa9d6;font-size:15px}.preview pre{background:0 0;border:1px solid #555;border-radius:5px;color:#acb2b8;padding:.8rem;width:100%}.preview-container{background-color:#111A24}.preview-top{background-color:#111A24;color:#63B7E9}.preview-top p{color:#8091a2}.preview-top p.name{color:#c6d4df;font-weight:700}.preview-top .next{background:rgba(0,0,0,.2)}.recommended{font-size:16px;color:#d6d7d8}.spoiler{background:#000;color:#aaa}.spoiler:hover{color:#eee}.ql-editor{line-height:1.5rem}a i{color:#fff}body{background:url(background.png) center top no-repeat #1B2838;font-family:"Motiva Sans",Sans-serif;font-size:13px;height:100%;line-height:1.3rem;min-height:100%;overflow-wrap:break-word}div.container-fluid{padding-left:0;padding-right:0}div.tutorial{-webkit-box-shadow:0 0 3px rgba(0,0,0,.4);-moz-box-shadow:0 0 3px rgba(0,0,0,.4);box-shadow:0 0 3px rgba(0,0,0,.4);background:#e3eaef;background:linear-gradient(180deg,#e3eaef 5%,#c7d5e0 95%);background:-webkit-linear-gradient(legacy-direction(180deg,#e3eaef 5%,#c7d5e0 95%));background-color:#fff;border-radius:10px;font-size:19.5px;line-height:1.95rem;padding:1.5rem;text-align:center;width:66.66%}footer{background:rgba(0,0,0,.3);background:linear-gradient(180deg,rgba(0,0,0,.3)0,rgba(0,0,0,.5)100%);background:-webkit-linear-gradient(legacy-direction(180deg,rgba(0,0,0,.3)0,rgba(0,0,0,.5)100%));color:#b8b6b4;line-height:1.69rem;margin-top:3rem;text-align:center;padding:.3rem 0}textarea{min-height:15rem;min-width:60rem;-webkit-box-shadow:0 0 10px 3px rgba(0,0,0,.75);-moz-box-shadow:0 0 10px 3px rgba(0,0,0,.75);box-shadow:0 0 10px 3px rgba(0,0,0,.75);margin-bottom:2rem}
\ No newline at end of file
diff --git a/assets/style.scss b/assets/style.scss
new file mode 100644
index 0000000..fc22580
--- /dev/null
+++ b/assets/style.scss
@@ -0,0 +1,282 @@
+//$primary-color: #2c9eea;
+//$secondary-color: #4adbcf;
+//$tertiary-color: #85a5dd;
+
+//Colours
+$body-background-color: #1B2838;
+$body-color: #acb2b8;
+$header-background-color: #171a21;
+$header-font-color: #b8b6b4;
+$h1-color: #5aa9d6;
+$link-color: #ebebeb;
+$text-color: #eee;
+$primary-button-gradient: rgba(47,137,188,1) 5%, rgba(23,67,92,1) 95%;
+$secondary-button-gradient: #799905 5%, #536904 95%;
+
+//Other
+$primary-font: "Motiva Sans", Sans-serif;
+$font-size: 13px;
+$line-height: 1.3rem;
+
+//Mixin for transitions
+@mixin transition($args...) {
+ -webkit-transition: $args;
+ -moz-transition: $args;
+ -ms-transition: $args;
+ -o-transition: $args;
+ transition: $args;
+}
+
+//Mixin for box shadows
+@mixin box-shadow($args...) {
+ -webkit-box-shadow: $args;
+ -moz-box-shadow: $args;
+ box-shadow: $args;
+}
+
+//Mixin for gradients
+@mixin gradient($direction, $colorStops...) {
+ @if is-direction($direction) == false {
+ $colorStops: $direction, $colorStops;
+ $direction: 180deg;
+ }
+
+ background: nth(nth($colorStops, 1), 1);
+ background: linear-gradient($direction, $colorStops);
+ background: -webkit-linear-gradient(legacy-direction($direction, $colorStops));
+}
+
+/// Test if `$value` is a valid direction
+/// @param {*} $value - Value to test
+/// @return {Bool}
+@function is-direction($value) {
+ $is-keyword: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
+ $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
+
+ @return $is-keyword or $is-angle;
+}
+
+#closeBtn {
+ float: right;
+ margin: 1rem;
+}
+
+#editorWindow {
+ @include box-shadow(0 0 3px rgba( 0, 0, 0, 0.4));
+ @include transition(box-shadow 0.2s ease);
+ background-color: #fff;
+ &.active {
+ @include box-shadow(0 0 10px rgba( 255, 255, 255, 0.7));
+ }
+}
+
+#editor {
+ min-height: 13rem;
+}
+
+.brighter {
+ background-image: url('rule.png');
+ background-position: bottom left;
+ background-repeat: no-repeat;
+ color: #fff;
+ font-size: 17px;
+ letter-spacing: 2px;
+ line-height: 26px;
+ margin: 0 0 10px;
+ text-transform: uppercase;
+}
+
+.btn {
+ cursor: pointer;
+ border-color: #000;
+}
+
+.btn-primary {
+ @include gradient(180deg, $primary-button-gradient);
+ color: #A4D7F5;
+ &:hover {
+ @include gradient(180deg, rgba(102,192,244,1) 5%, rgba(47,137,188,1) 95%);
+ color: #fff;
+ text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.3 );
+ }
+}
+
+.btn-success {
+ @include gradient(180deg, $secondary-button-gradient);
+ color: #D2E885;
+ &:hover {
+ @include gradient(180deg, rgba(121,153,5,1) 5%, rgba(83,105,4,1) 95%);
+ color: #fff;
+ text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.3 );
+ }
+}
+
+.display-4 {
+ @include transition(color 0.3s ease);
+ color: $header-font-color;
+ &:hover {
+ color: $text-color;
+ }
+}
+
+.editor-toolbar {
+ text-align: center;
+}
+
+.fa-inverse {
+ @include gradient(180deg, $primary-button-gradient);
+ color: black;
+ &.hide {
+ -webkit-text-fill-color: transparent;
+ }
+}
+
+.fa-lg {
+ font-size: 17px !important;
+}
+
+.fa-2x {
+ font-size: 20px !important;
+}
+
+
+.jumbotron {
+ background-color: $header-background-color;
+ color: $header-font-color;
+ font-variant: small-caps;
+ font-family: 'Monserrat', sans-serif;
+ text-shadow: 1px 1px 10px #222;
+ text-align: center;
+}
+
+.markup {
+ background-color: #111A24;
+ color: $body-color;
+ font-family: $primary-font;
+ font-size: 13px;
+ line-height: 17px;
+ white-space: pre-line;
+}
+
+@media only screen and (min-width: 1200px) {
+ .preview {
+ min-width: 400px;
+ max-width: 400px;
+ }
+}
+
+.preview {
+ @extend .markup;
+ overflow-wrap: break-word;
+ overflow: hidden;
+ & a {
+ color: $link-color;
+ }
+ & blockquote {
+ border: 1px solid lightblue;
+ border-radius: 5px;
+ padding: 0.8rem;
+ width: 100%;
+ }
+ & code {
+ background: transparent;
+ color: $body-color;
+ }
+ & h1 {
+ color: $h1-color;
+ font-size: 15px;
+ }
+ & pre {
+ background: transparent;
+ border: 1px solid #555;
+ border-radius: 5px;
+ color: $body-color;
+ padding: 0.8rem;
+ width: 100%;
+ }
+}
+
+.preview-container {
+ background-color: #111A24;
+}
+
+.preview-top {
+ background-color: #111A24;
+ color: #63B7E9;
+ & p {
+ color: #8091a2;
+ &.name {
+ color: #c6d4df;
+ font-weight: bold;
+ }
+ }
+ & .next {
+ background: rgba( 0, 0, 0, 0.2 );
+ }
+}
+
+.recommended {
+ font-size: 16px;
+ color: #d6d7d8;
+}
+
+.spoiler {
+ background: black;
+ color: #aaa;
+ &:hover {
+ color: $text-color;
+ }
+}
+
+.ql-editor {
+ line-height: 1.5rem;
+}
+
+a i{
+ color: white;
+}
+
+body {
+ //background-color: $body-background-color;
+ background: url('background.png') center top no-repeat $body-background-color;
+ font-family: $primary-font;
+ font-size: $font-size;
+ height: 100%;
+ line-height: $line-height;
+ min-height: 100%;
+ overflow-wrap: break-word;
+}
+
+div {
+ &.container-fluid {
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+ &.tutorial {
+ @include box-shadow(0 0 3px rgba( 0, 0, 0, 0.4));
+ @include gradient(180deg, #e3eaef 5%, #c7d5e0 95%);
+ background-color: #fff;
+ border-radius: 10px 10px;
+ font-size: $font-size*1.5;
+ line-height: $line-height*1.5;
+ padding: 1.5rem;
+ text-align: center;
+ width: 66.66%;
+ }
+}
+
+footer {
+ @include gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
+ color: $header-font-color;
+ line-height: $line-height*1.3;
+ margin-top: 3rem;
+ text-align: center;
+ padding: 0.3rem 0;
+}
+
+textarea {
+ min-height: 15rem;
+ min-width: 60rem;
+ @include box-shadow(0px 0px 10px 3px rgba(0, 0, 0, 0.75));
+ margin-bottom: 2rem;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c230d9b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,190 @@
+
+
+
+
+
Steam Review Editor
+ Store Preview
Recommended
+ Markup Preview