.isso-auth-section { display: flex !important; flex-flow: row wrap; gap: var(--space-3xs); & .isso-input-wrapper { flex-basis: 30%; flex-grow: 1; } } @container (width < 460px) { .isso-auth-section { flex-flow: column; } } .isso-comment { & > .isso-avatar { margin-left: var(--space-l); margin-top: var(--space-l); & img { border-radius: var(--large-rounded-radius); border-top-left-radius: 0; } } & .isso-comment-footer { display: flex; flex-flow: row nowrap; align-items: center; & a { position: inherit; } & .isso-reply { color: var(--contrast-color); font-family: var(--font-family-ui); font-size: var(--step--2); font-variation-settings: "wght" 700; letter-spacing: var(--wide-letter-spacing); text-align: end; text-transform: uppercase; } & .isso-spacer { display: none; } & .isso-votes { color: var(--contrast-color); font-family: var(--font-family-ui); font-size: var(--step--1); font-variation-settings: "wght" 700; letter-spacing: var(--wide-letter-spacing); text-transform: uppercase; } & svg { fill: var(--contrast-color) !important; } } & .isso-comment-header { color: var(--contrast-color) !important; margin-bottom: var(--space-s); & a[href].isso-author, a[href].isso-author:visited, a[href].isso-author:hover { color: var(--contrast-color) !important; } & .isso-author { color: var(--contrast-color); font-family: var(--font-family-ui); font-size: var(--step--1); font-variation-settings: "wght" 600; &::after { content: "\A"; white-space: pre; } } & .isso-permalink { color: var(--contrast-color); font-family: var(--font-family-ui); font-size: var(--step--2); font-variation-settings: "wght" 500; } & .isso-spacer { display: none; } } & > .isso-follow-up { border-top-right-radius: 0; margin-top: var(--space-xs); margin-bottom: var(--space-l); & .isso-text-wrapper { border-top-left-radius: var(--large-rounded-radius); border-top-right-radius: 0; } } & > .isso-text-wrapper { background-color: var(--contrast-color-tint); border-radius: var(--large-rounded-radius); border-top-left-radius: 0; padding: var(--space-l); & .isso-text p { font-style: italic; margin-block: 0 1lh !important; } } &:not(:first-of-type), .isso-follow-up .isso-comment { border-top: none !important; } } section#isso-thread { & h4.isso-thread-heading { color: var(--contrast-color); font-family: var(--font-family-ui); font-size: var(--step-0); font-variation-settings: "wght" 450; letter-spacing: var(--wide-letter-spacing); line-height: calc(var(--step-0) * 0.25 + var(--step-0)); margin-block: 0 1lh; margin-top: var(--space-m); padding-bottom: 0; padding-top: 0; text-transform: uppercase; text-wrap: pretty; } } .isso-text > h1, .isso-text > h2 { padding: 0 0 0 0 !important; } .isso-form-wrapper > .isso-auth-section > .isso-post-action > input { background-color: var(--contrast-color-tint) !important; border: none !important; border-radius: var(--border-radius) !important; color: var(--contrast-color) !important; font-family: var(--font-family-ui) !important; font-size: var(--step--2) !important; font-variation-settings: var(--font-variation-ui) !important; height: var(--space-m-l) !important; letter-spacing: var(--wide-letter-spacing) !important; margin: var(--space-s) 0 0 0 !important; padding: 0 var(--space-xs) !important; text-transform: uppercase !important; transition: var(--transition-normal) !important; white-space: nowrap !important; } p.isso-input-wrapper { display: block !important; margin: 0 !important; max-width: 100% !important; & > label { font-family: var(--font-family-ui) !important; font-size: var(--step--2) !important; font-variation-settings: var(--font-variation-ui) !important; margin-top: var(--space-s) !important; } & input { margin-block: inherit !important; } } @container (width < 460px) { p.isso-input-wrapper > label { margin-top: 0 !important; } } .isso-postbox { background-color: var(--contrast-color); border-radius: var(--large-rounded-radius); border-top-left-radius: 0; color: var(--background-color); padding: var(--space-l) calc((100cqw - (var(--grid-gutter) * 11)) / 12) var(--space-2xs) calc((100cqw - (var(--grid-gutter) * 11)) / 12); /*! margin-left: calc(((100cqw - (var(--grid-gutter) * 11)) / 12) * -1) !important; */ margin-block: 1lh 1lh; /*! width: calc(((100cqw) / 12) * 14); */ } @container (width < 460px) { .isso-postbox { padding: var(--space-l) var(--space-m) var(--space-s) var(--space-m); } } .isso-post-action { display: inline-block !important; float: inherit !important; margin-left: 0 !important; &::after { content: "" !important; } } @container (width < 460px) { .isso-post-action { margin-bottom: 0 !important; } } .isso-text { color: var(--text-color); & > blockquote { margin: 0; padding: var(--space-3xs) var(--space-s); &::before { font-size: var(--step-5); margin-top: -4.5px; } & p { padding: 0 0 0 var(--space-s); } } & p { margin-bottom: 0 !important; } } textarea.isso-textarea { background-color: var(--background-color) !important; border: var(--border-details) !important; border-color: var(--contrast-color) !important; border-radius: var(--border-radius) !important; color: var(--text-color) !important; font-family: var(--font-family) !important; font-size: var(--step-0) !important; font-variation-settings: var(--font-variation-default) !important; margin-bottom: 0 !important; min-height: var(--space-l) !important; resize: vertical !important; width: 100%; } /* reply form */ .isso-root > .isso-comment > .isso-text-wrapper > .isso-postbox { width: 100%; margin-left: auto; } @media (max-width: 900px) { .isso-postbox { margin-left: auto !important; width: 100%; } }