Веб-сайт самохостера Lotigara

summaryrefslogtreecommitdiff
path: root/archive/css/isso.css
diff options
context:
space:
mode:
authorIvan Davydov <lotigara@lotigara.ru>2025-06-21 18:29:46 +0300
committerIvan Davydov <lotigara@lotigara.ru>2025-06-21 18:29:46 +0300
commit01773eabc92ef6ee90657e8fa179e36e52464f4e (patch)
tree18586cf57fc3c0ef2828f9d405ceb73c61bc080a /archive/css/isso.css
parent401aa8724fb641bfae48fabef1d09ed448242cd3 (diff)
Make the website minimalistic
Diffstat (limited to 'archive/css/isso.css')
-rw-r--r--archive/css/isso.css324
1 files changed, 324 insertions, 0 deletions
diff --git a/archive/css/isso.css b/archive/css/isso.css
new file mode 100644
index 0000000..d8b3f00
--- /dev/null
+++ b/archive/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;
+ }
+}