Initial commit

1 files changed, 324 insertions, 0 deletions

diff --git a/css/isso.css b/css/isso.css
new file mode 100644
index 0000000..d8b3f00
--- /dev/null
+++ b/css/isso.css
@@ -0,0 +1,324 @@
+/* ========================================================================== */
+/* Generic styling                                                            */
+/* ========================================================================== */
+#isso-thread * {
+    /* Reset */
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+/* ========================================================================== */
+/* Thread heading area                                                        */
+/* ========================================================================== */
+#isso-thread {
+    padding: 4px 8px 4px 8px;
+    margin: 0;
+    text-align: left;
+    color: var(--text-color);
+}
+h4.isso-thread-heading {
+    padding-bottom: 8px;
+    color: var(--gray-color);
+    font-weight: bold;
+}
+.isso-feedlink {
+    padding-bottom: 8px;
+    float: right;
+    padding-left: 1em;
+}
+.isso-feedlink a {
+    font-size: 0.8em;
+    vertical-align: bottom;
+}
+
+/* ========================================================================== */
+/* Comments                                                                   */
+/* ========================================================================== */
+
+.isso-comment {
+    max-width: 68em;
+    margin: 0 auto;
+}
+.isso-preview .isso-comment {
+    padding-top: 0;
+    margin: 0;
+}
+.isso-comment:not(:first-of-type),
+.isso-follow-up .isso-comment {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    margin-bottom: 0.5em;
+}
+.isso-avatar {
+    display: block;
+    float: left;
+    margin: 0.95em 0.95em 0;
+}
+.isso-avatar svg {
+    max-width: 48px;
+    max-height: 48px;
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.isso-text-wrapper {
+    display: block;
+    padding: 0.95em;
+}
+.isso-follow-up {
+    padding-left: calc(7% + 20px);
+}
+.isso-comment-footer {
+    font-size: 0.95em;
+}
+.isso-comment-header {
+    font-size: 0.85em;
+}
+.isso-comment-header a {
+    text-decoration: none;
+}
+/* Only for comment header, spacer between up-/downvote should have no padding */
+.isso-comment-header .isso-spacer {
+    padding: 0 6px;
+}
+.isso-spacer,
+.isso-permalink,
+.isso-note,
+.isso-parent {
+    color: gray;
+    font-weight: normal;
+    text-shadow: none;
+}
+.isso-spacer:hover,
+.isso-permalink:hover,
+.isso-note:hover,
+.isso-parent:hover {
+    color: #606060;
+}
+.isso-note {
+    float: right;
+}
+.isso-author {
+    font-weight: bold;
+    color: var(--gray-color);
+}
+.isso-page-author-suffix {
+    font-weight: bold;
+    color: #2c2c2c;
+}
+.isso-textarea,
+.isso-preview {
+    margin-top: 0.2em;
+    width: 100%;
+    border: 1px solid #f0f0f0;
+    border-radius: 2px;
+    box-shadow: 0 0 2px #888;
+}
+.isso-text p {
+    margin-top: 0.2em;
+}
+.isso-text p:last-child {
+    margin-bottom: 0.2em;
+}
+.isso-text h1,
+.isso-text h2,
+.isso-text h3,
+.isso-text h4,
+.isso-text h5,
+.isso-text h6 {
+    font-size: 130%;
+    font-weight: bold;
+}
+.isso-comment-footer {
+    font-size: 0.80em;
+    color: gray;
+    clear: left;
+}
+.isso-feedlink,
+.isso-comment-footer a {
+    font-weight: bold;
+    text-decoration: none;
+}
+.isso-feedlink:hover,
+.isso-comment-footer a:hover {
+    color: #111111;
+    text-shadow: #aaaaaa 0 0 1px;
+}
+.isso-comment-footer > a {
+    position: relative;
+    top: .2em;
+}
+.isso-comment-footer > a + a {
+    padding-left: 1em;
+}
+.isso-comment-footer .isso-votes {
+    color: gray;
+}
+.isso-upvote svg,
+.isso-downvote svg {
+    position: relative;
+    top: .2em;
+}
+/* Reply postbox under existing comment */
+.isso-comment .isso-postbox {
+    margin-top: 0.8em;
+}
+.isso-comment.isso-no-votes > * > .isso-comment-footer .isso-votes {
+    display: none;
+}
+
+/* ========================================================================== */
+/* Postbox                                                                    */
+/* ========================================================================== */
+.isso-postbox {
+    max-width: 68em;
+    margin: 0 auto;
+    clear: right;
+}
+.isso-form-wrapper {
+    display: block;
+    padding: 0;
+    background: var(--bg-color);
+    color: var(--text-color);
+}
+.isso-textarea,
+.isso-preview {
+    margin: 0 0 .3em;
+    padding: .4em .8em;
+    border-radius: 3px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+.isso-textarea {
+    outline: 0;
+    width: 100%;
+    resize: none;
+    background: var(--bg-color);
+    color: var(--text-color);
+}
+.isso-form-wrapper input[type=checkbox] {
+    vertical-align: middle;
+    position: relative;
+    accent-color: var(--theme-color);
+    background: var(--bg-color);
+    margin-left: 0;
+    margin-right: 4px;
+}
+.isso-notification-section {
+    font-size: 0.90em;
+    padding-top: .3em;
+    display: none;
+    padding-bottom: 10px;
+}
+.isso-auth-section {
+    display: block;
+}
+.isso-textarea:focus,
+.isso-auth-section input:focus {
+    border-color: rgba(0, 0, 0, 0.8);
+}
+.isso-input-wrapper {
+    display: inline-block;
+    position: relative;
+    max-width: 25%;
+    margin: 0;
+}
+.isso-input-wrapper input {
+    padding: .3em 10px;
+    max-width: 100%;
+    border-radius: 3px;
+    line-height: 1.4em;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    background: var(--bg-color);
+    color: var(--text-color);
+}
+.isso-input-wrapper label {
+    display: inline-block;
+    line-height: 1.4em;
+    height: 1.4em;
+}
+.isso-post-action {
+    display: block;
+    float: right;
+    margin: 1.4em 0 0 5px;
+}
+.isso-post-action > input {
+    padding: calc(.3em - 1px);
+    border-radius: 2px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    outline: 0;
+    line-height: 1.4em;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    background: var(--bg-color);
+    color: var(--text-color);
+}
+.isso-post-action > input:hover {
+    background-color: var(--gray-color);
+}
+.isso-post-action > input:active {
+    background-color: var(--theme-color);
+}
+
+/* ========================================================================== */
+/* Postbox (preview mode)                                                     */
+/* ========================================================================== */
+.isso-preview,
+.isso-post-action input[name="edit"],
+.isso-postbox.isso-preview-mode > .isso-form-wrapper input[name="preview"],
+.isso-postbox.isso-preview-mode > .isso-form-wrapper .isso-textarea {
+    display: none;
+}
+.isso-postbox.isso-preview-mode > .isso-form-wrapper .isso-preview {
+    display: block;
+}
+.isso-postbox.isso-preview-mode > .isso-form-wrapper input[name="edit"] {
+    display: inline;
+}
+.isso-preview {
+    /*background-color: #f8f8f8;
+    background: repeating-linear-gradient(
+        -45deg,
+        #f8f8f8,
+        #f8f8f8 10px,
+        #fff 10px,
+        #fff 20px
+    );*/
+}
+
+/* ========================================================================== */
+/* Animations                                                                 */
+/* ========================================================================== */
+
+/* "target" means the comment that's being linked to, for example:
+ * https://example.com/blog/example/#isso-15
+ */
+.isso-target {
+    animation: isso-target-fade 5s ease-out;
+}
+@keyframes isso-target-fade {
+    0% { background-color: #eee5a1; }
+    /* This color should be changed when used on a dark background,
+     * maybe #3f3c1c for example
+     */
+}
+
+/* ========================================================================== */
+/* Media queries                                                              */
+/* ========================================================================== */
+@media screen and (max-width:600px) {
+    .isso-input-wrapper {
+        display: block;
+        max-width: 100%;
+        margin: 0 0 .3em;
+    }
+    .isso-input-wrapper input {
+        width: 100%;
+    }
+    .isso-post-action {
+        margin-top: 0;
+    }
+}