User:Messing with data/vector.css

* {
  box-sizing: border-box;
}

:root {
	--iopw-comp-comment-font: var(--iopw-sys-typeface-base), --iopw-sys-typeface-base-fallback);
	--iopw-comp-comment-border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-80);
	--iopw-comp-comment-border-radius: 0;
}

/** Flowthread- common.css **/
#flowthread {
  & .comment-body textarea,
  & .comment-preview {
    margin: 0;
    padding: 6.25rem;
    resize: none;
    box-sizing: border-box;
    width: 100%;
    display: block;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8125rem;
    line-height: var(--iopw-sys-size-5);
    border-width: var(--iopw-sys-border-width) var(--iopw-sys-border-width) medium;
    border-style: var(--iopw-sys-border-style) var(--iopw-sys-border-style) none;
    border-color: var(--iopw-sys-palette-gray-70) var(--iopw-sys-palette-gray-70) var(--iopw-sys-palette-gray-50);
    border-radius: var(--iopw-comp-comment-border-radius);
    background: var(--iopw-sys-palette-gray-99)
  }

  & .comment-body textarea {
    color: var(--iopw-sys-palette-gray-60);
    height: 3.75rem
  }

  & .comment-preview {
    min-height: 4.375rem;
    padding-top: 0px
  }

  & .comment-preview {
    background: var(--iopw-ref-palette-gray-90)
  }

  & .comment-toolbar {
    position: relative;
    height: var(--iopw-sys-size-8);
    color: var(--iopw-ref-palette-gray-30);
    padding-left: 0.625rem;
    font-size: var(--iopw-sys-size-3);
    line-height: var(--iopw-sys-size-8);
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-ref-palette-gray-80);
    border-radius: 0px 0px 3px 3px;
    background: var(--iopw-ref-palette-gray-99);
    box-sizing: border-box;
    margin-bottom: var(--iopw-sys-size-4)
  }

  & .comment-submit {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: absolute;
    right: -0.0625rem;
    top: -0.0625rem;
    height: var(--iopw-sys-size-8);
    width: 6.25rem;
    text-align: center;
    text-shadow: 0px 1px 0px var(--iopw-ref-palette-gray-99);
    color: var(--iopw-ref-palette-gray-30);
    font-size: 0.875rem;
    font-weight: var(--iopw-sys-font-weight-bold);
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-ref-palette-gray-80);
    background-color: var(--iopw-ref-palette-gray-99);
    transition: all 0.3s ease-out;
    box-shadow: 0px 0px 0px var(--iopw-ref-palette-gray-99) inset, 0px 0px 0px var(--iopw-ref-palette-gray-99);
    cursor: pointer;
    margin: 0px;
    padding: 0px;
    border-radius: 0px 0px 3px 0px;
    outline: 0
  }

  & .comment-submit:hover {
    box-shadow: 0px 0px 0px white inset, 0 5px 11px 0 rgba(0, 0, 0, 0.18)
  }

  & .comment-submit:active {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) inset, 0px 0px 0px white
  }

  & .flowthread-btn {
    position: relative;
    top: -0.0625rem;
    float: left;
    width: var(--iopw-sys-size-6);
    height: var(--iopw-sys-size-6);
    margin: var(--iopw-sys-size-1);
    padding: 0px;
    border-radius: 10%;
    outline: 0;
    border: 0 var(--iopw-ref-palette-gray-99);
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    transition: all 0.3s ease-out
  }

  & .flowthread-btn::-moz-focus-inner,
  & .comment-submit::-moz-focus-inner {
    border: 0
  }

  & .flowthread-btn:hover {
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-ref-palette-gray-80);
    box-shadow: 0px 0px 0px white inset, 0 5px 11px 0 rgba(0, 0, 0, 0.18)
  }

  & .flowthread-btn:active,
  & .flowthread-btn.on {
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-ref-palette-gray-80);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) inset, 0px 0px 0px white
  }

  & .flowthread-btn.on:hover {
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-ref-palette-gray-80);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) inset, 0 5px 11px 0 rgba(0, 0, 0, 0.18)
  }

  & .flowthread-btn.on:active {
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-ref-palette-gray-80);
    box-shadow: 0px 0px 0px white inset, 0 0 0 0 white
  }

  & .flowthread-btn-preview {
    width: 0px;
    margin: var(--iopw-sys-size-1) 0;
    opacity: 0;
    background-image: url(/extensions/FlowThread/assets/preview.svg?a181a)
  }

  & .flowthread-btn-wikitext {
    background-image: url(/extensions/FlowThread/assets/wikitext.svg?e4407)
  }

  & .flowthread-btn-wikitext.on+.flowthread-btn-preview {
    width: var(--iopw-sys-size-6);
    margin: var(--iopw-sys-size-1);
    opacity: 1
  }

  & .comment-reply::before,
  & .comment-like::before,
  & .comment-report::before,
  & .comment-delete::before,
  & .comment-recover::before {
    content: "";
    background: transparent url(/extensions/FlowThread/assets/sprites.png?e1980) no-repeat scroll 0% 0%;
    opacity: 0.6;
    display: inline-block;
    width: 0.9375;
    height: 0.625rem;
    transition: opacity 0.15s linear 0s;
    font-size: 0.5625rem;
    vertical-align: middle
  }

  & .comment-reply,
  & .comment-like,
  & .comment-report,
  & .comment-delete {
    margin-left: 0.3125rem;
    cursor: pointer;
    transition: color 0.15s linear 0s
  }

  & .comment-reply:hover,
  & .comment-like:hover,
  & .comment-report:hover,
  & .comment-delete:hover {
    opacity: 1.0;
    color: var(--iopw-ref-palette-gray-30)
  }

  & .comment-reply:hover::before,
  & .comment-like:hover::before,
  & .comment-report:hover::before,
  & .comment-delete:hover::before {
    opacity: 1.0
  }

  & .comment-reply::before {
    background-position: 0px 0px
  }

  & .comment-like::before {
    background-position: 0px -14px
  }

  & .comment-like[liked]::before {
    background-position: 0px -27px
  }

  & .comment-report::before {
    background-position: 0px -50px
  }

  & .comment-report[reported]::before {
    background-position: 0px -62px
  }

  & .comment-delete::before {
    background-position: 0px -40px
  }

  & .comment-avatar img {
    width: 3.125rem;
    height: 3.125rem
  }

  & .comment-thread>div:not(:first-child) .comment-avatar img {
    width: var(--iopw-sys-size-7);
    height: var(--iopw-sys-size-7)
  }

  & .comment-thread>div:not(:first-child) .comment-body {
    padding-left: 2.5rem
  }

  & .comment-thread .comment-replybox {
    margin-left: 3.75rem;
  }

  & .comment-avatar {
    float: left;
    cursor: pointer
  }

  & .comment-thread {
    border-top: var(--iopw-ref-border-width) var(--iopw-ref-border-style) rgba(0, 0, 0, 0.13)
  }

  & .comment-post {
    padding: 0.625rem
  }

  & .comment-container {
    margin-top: 1rem
  }

  & .comment-body {
    padding-left: 3.75rem;
  }

  & .comment-user,
  .comment-user a {
    color: var(--iopw-ref-palette-gray-40);
    font-size: var(--iopw-sys-size-3)
  }

  & .comment-text {
    font-size: var(--iopw-sys-size-3);
    line-height: var(--iopw-sys-size-6);
    margin: var(--iopw-sys-size-2) 0;
    word-wrap: break-word;
    position: relative;
    overflow: hidden;
    min-height: var(--iopw-sys-size-4);
    max-width: 60rem;
  }

  & .comment-footer {
    font-size: var(--iopw-sys-size-3);
    margin-right: var(--iopw-sys-size-2);
    color: var(--iopw-ref-palette-gray-50)
  }

  & .comment-markchecked {
    margin-left: 0.3125rem
  }

  & .comment-markchecked,
  & .comment-recover {
    margin-left: 0.3125rem;
    cursor: pointer;
    transition: color 0.15s linear 0s
  }

  & .comment-recover::before {
    background-position: 0px 0px
  }

  & .comment-recover:hover::before {
    opacity: 1.0
  }

  & .comment-recover:hover,
  & .comment-markchecked:hover {
    opacity: 1.0;
    color: var(--iopw-ref-palette-gray-50)
  }

  & .comment-selected {
    padding-left: 1rem;
    background: var(--iopw-ref-palette-gray-80);
  }

  & a.pager-disable {
    color: var(--iopw-ref-palette-gray-00);
    cursor: text;
    text-decoration: none
  }
}

/** Flowthread- flowthread.css **/
#flowthread {
    clear: both;
    margin-top: 2rem;

  & .comment-avatar {
    float: left;
  }

  & .comment-thread {
    border-top: var(--iopw-sys-border-width) var(--iopw-sys-border-style) rgba(0, 0, 0, 0.13);
  }

  & .comment-post {
    padding: 0.625rem;
  }

  & .comment-body {
    padding-left: 3.75rem;
  }

  & .comment-user, .comment-user a {
    color: var(--iopw-sys-palette-primary);
    font-size: 0.8125rem;
    margin-right: var(--iopw-sys-size-2);
  }

  & .comment-text {
    font-size: 0.8125rem;
    line-height: var(--iopw-sys-size-6);
    margin: var(--iopw-sys-size-2) 0px;
    word-wrap: break-word;
    /* Added to guard against malacious position:absolute */
    position: relative;
    overflow: hidden;
    min-height: var(--iopw-sys-size-4);
  }

  & .comment-footer {
    font-size: var(--iopw-sys-size-3);
    margin-right: var(--iopw-sys-size-2);
    color: var(--iopw-sys-palette-gray-60);
  }

  & .comment-post .comment-report, .comment-post .comment-delete {
    display: none;
  }

  & .comment-post:hover .comment-report, .comment-report[reported], .comment-post:hover .comment-delete {
    display: initial;
  }

  & .comment-thread .comment-thread {
    margin-left: 2.5rem;
  }

  & .comment-paginator {
    border-top: var(--iopw-sys-border-width) var(--iopw-sys-border-style) rgba(0,0,0,0.13);
    text-align: right;
    padding: var(--iopw-sys-size-2);
  }

  & .comment-paginator span {
    color: var(--iopw-sys-palette-primary);
    border-radius: var(--iopw-comp-comment-border-radius);
    font-size: var(--iopw-sys-size-3);
    margin: 0 0.1875rem;
    padding: 0.125rem 0.3125rem;
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) transparent;
    cursor: pointer;
  }

  & .comment-paginator span:hover {
    color: var(--iopw-sys-palette-primary-lighter);
    background-color: var(--iopw-sys-palette-on-primary);
  }

  & .comment-paginator span[current] {
    border: var(--iopw-comp-comment-border);
    color: var(--iopw-sys-palette-on-primary);
    background-color: var(--iopw-sys-palette-primary);
    text-shadow: none;
  }

  & .comment-bannotice {
    border-top: var(--iopw-sys-border-width) var(--iopw-sys-border-style) rgba(0,0,0,0.13);
    font-size: 0.8125rem;
    text-align: center;
    padding: var(--iopw-sys-size-4);
    color: var(--iopw-sys-palette-gray-50);
  }

  & .comment-container-top {
    border: var(--iopw-comp-comment-border);
    border-radius: var(--iopw-comp-comment-border-radius);
  }

  & .comment-container-top[disabled] {
    display: none;
  }

  /* The title bar */
  & .comment-container-top > div:first-child {
    background: var(--iopw-sys-palette-gray-90);
    height: var(--iopw-sys-size-6);
    line-height: var(--iopw-sys-size-6);
    color: var(--iopw-sys-palette-gray-30);
    text-indent: var(--iopw-sys-size-4);
    font-size: small;
    border-radius: var(--iopw-comp-comment-border-radius) var(--iopw-comp-comment-border-radius) 0 0;
  }

  & .comment-container-top > div:last-child {
    border-radius: 0 0 var(--iopw-comp-comment-border-radius) var(--iopw-comp-comment-border-radius);
  }

  & .comment-container-top:not([disabled]) + .comment-container > div:first-child {
    border-top: 0;
  }
}