User:Messing with data/vector.css

* {
  box-sizing: border-box;
}

:root {
	--iopw-sys-size-0-5: 0.125rem;
	--iopw-sys-size-12: calc(var(--iopw-sys-size-4) * 3); /* 3rem */
	--iopw-sys-size-16: calc(var(--iopw-sys-size-4) * 4); /* 4rem */
	--iopw-sys-size-24: calc(var(--iopw-sys-size-4) * 6); /* 6rem */
	--iopw-sys-size-32: calc(var(--iopw-sys-size-4) * 8); /* 8rem */
	
	--iopw-sys-typeface-base-alt: var(--iopw-sys-typeface-base);
	
	--iopw-ref-palette-input: #F5F5EF;
	--iopw-ref-palette-on-input: #5A5A55;
	
	--iopw-sys-palette-input: var(--iopw-ref-palette-input);
	--iopw-sys-palette-on-input: var(--iopw-ref-palette-on-input);

    --iopw-comp-comment-font-color: var(--iopw-sys-palette-on-surface);
	--iopw-comp-comment-font: var(--iopw-sys-typeface-base), var(--iopw-sys-typeface-alt), --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;
	--iopw-comp-comment-control-font-size: var(--iopw-sys-size-3);
	--iopw-comp-comment-post-font-size: calc(var(--iopw-sys-size-3) + var(--iopw-sys-size-0-5));
}

.mediawiki textarea,
.mediawiki input[type='text'] {
  color: var(--iopw-sys-palette-on-input);
  background-color: (--iopw-sys-palette-input);
  &::selection {
    color: var(--iopw-sys-palette-on-primary);
    background-color: var(--iopw-sys-palette-primary);
  }
}

/** Flowthread Styling **/
#flowthread {
  clear: both;
  margin-top: var(--iopw-sys-size-8);
  color: var(--iopw-comp-comment-font-color);
  
  & .comment-body textarea,
  & .comment-preview {
    margin: 0;
    padding: var(--iopw-sys-size-2);
    resize: none;
    width: 100%;
    display: block;
    font-family: var(--iopw-comp-comment-font);
    font-size: var(--iopw-comp-comment-post-font-size);
    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);
  }

  & .comment-body textarea {
    background: var(--iopw-sys-palette-input);
    color: var(--iopw-sys-palette-on-input);
    height: calc(var(--iopw-sys-size-12) + var(--iopw-sys-size-3));
  }

  & .comment-preview {
    min-height: var(--iopw-sys-size-16);
    padding: var(--iopw-sys-size-4);
    background: color-mix(in srgb, var(--iopw-sys-palette-gray-60) var(--iopw-sys-transparency-75), transparent);
  }

  & .comment-toolbar {
    position: relative;
    height: auto;
    color: var(--iopw-sys-palette-gray-30);
    padding: var(--iopw-sys-size-2);
    font-size: var(--iopw-comp-comment-control-font-size);
    line-height: initial;
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-40);
    border-radius: 0px 0px var(--iopw-comp-comment-border-radius) var(--iopw-comp-comment-border-radius);
    background: color-mix(in srgb, var(--iopw-sys-palette-gray-40) var(--iopw-sys-transparency-50), transparent);
  }

  & .comment-submit {
    font-family: var(--iopw-comp-comment-font);
    position: absolute;
    height: var(--iopw-sys-size-7);
    text-shadow: none;
    color: var(--iopw-sys-palette-gray-30);
    font-size: var(--iopw-comp-comment-control-font-size);
    font-weight: var(--iopw-sys-font-weight-bold);
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-99);
    transition: all 0.3s ease-out;
    box-shadow: 0px 0px 0px var(--iopw-sys-palette-gray-99) inset, 0px 0px 0px var(--iopw-sys-palette-gray-99);
    cursor: pointer;
    margin: 0;
    padding: 0 var(--iopw-sys-size-3);
    border-radius: 0;
    outline: 0;
    background: linear-gradient(0deg, transparent 10%, var(--iopw-sys-palette-primary) 30%, var(--iopw-sys-palette-primary-lighter) 100%),
                repeating-linear-gradient(135deg, var(--iopw-sys-palette-primary) 0px, var(--iopw-sys-palette-primary) 0.15rem, var(--iopw-sys-palette-primary-lighter) 0.15rem, var(--iopw-sys-palette-primary-lighter) 0.3rem, var(--iopw-sys-palette-primary-lighter) 0.3rem);
    clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0 100%);
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    right: var(--iopw-sys-size-1);
    width: auto;
    align-items: center;
    display: flex;
    justify-content: center;
    
    &::after {
    	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(255,255,255,0.3) 70%, rgba(255,255,255,0.2) 90%, rgba(255,255,255,0.8) 100%);
    	content: "";
    	width: 100%;
    	height: 100%;
    	display: block;
    	position: absolute;
    }
  }

  & .comment-submit:hover {
    box-shadow: 0px 0px 0px var(--iopw-sys-palette-gray-99) 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 var(--iopw-sys-palette-gray-99)
  }

  & .flowthread-btn {
    position: static;
    float: none;
    width: var(--iopw-sys-size-6);
    height: var(--iopw-sys-size-6);
    margin: 0;
    padding: 0;
    border-radius: var(--iopw-comp-border-radius);
    outline: 0;
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-60);
    background-color: var(--iopw-sys-palette-gray-50);
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease-out;
    cursor: pointer;
  }

  & .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-sys-palette-gray-80);
    box-shadow: 0px 0px 0px var(--iopw-sys-palette-gray-99) inset, 0 5px 11px 0 rgba(0, 0, 0, 0.18);
    background-color: var(--iopw-sys-palette-primary-lighter);
  }

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

  & .flowthread-btn.on:hover {
    border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-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-sys-palette-gray-80);
    box-shadow: 0px 0px 0px white inset, 0 0 0 0 white
  }

  & .flowthread-btn-preview {
  	width: 0;
    margin: 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: 0 0 0 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-sys-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: var(--iopw-sys-size-12);
    height: auto;
  }

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

  & .comment-thread>div:not(:first-child) .comment-body {
    padding-left: calc(var(--iopw-sys-size-8) + var(--iopw-sys-size-2));
  }

  & .comment-thread .comment-replybox {
    margin-left: calc(var(--iopw-sys-size-12) + var(--iopw-sys-size-3));
  }

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

  & .comment-container {
    margin-top: var(--iopw-sys-size-4)
  }

  & .comment-text {
    font-size: var(--iopw-comp-comment-post-font-size);
    line-height: var(--iopw-sys-size-6);
    margin: var(--iopw-sys-size-2) 0;
    word-wrap: break-word;
    max-width: calc(var(--iopw-sys-size-2) * 70);

    /* Added to guard against malacious position:absolute */
    position: relative;
    overflow: hidden;
    min-height: var(--iopw-sys-size-4);
  }

  & .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-sys-palette-gray-50)
  }

  & .comment-selected {
    padding-left: var(--iopw-sys-size-4);
    background: var(--iopw-sys-palette-gray-80);
  }

  & a.pager-disable {
    color: var(--iopw-sys-palette-gray-00);
    cursor: text;
    text-decoration: none
  }
  
  & .comment-replybox .comments-guideline {
    font-size: var(--iopw-comp-comment-control-font-size);
  }

  & .comment-thread {
    border-top: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-30);
  }

  & .comment-post {
    padding: calc(var(--iopw-sys-size-2) + var(--iopw-sys-size-0-5));
  }

  & .comment-body {
    padding-left: calc(var(--iopw-sys-size-12) + var(--iopw-sys-size-3));
  }

  & .comment-user {
  	color: var(--iopw-sys-palette-gray-60);
    font-size: var(--iopw-comp-comment-control-font-size);
    margin-right: var(--iopw-sys-size-2);
  
    &>a {
      color: var(--iopw-sys-palette-primary);
    }
  }

  & .comment-footer {
    font-size: var(--iopw-comp-comment-control-font-size);
    margin-right: var(--iopw-sys-size-2);
    color: var(--iopw-sys-palette-gray-60);
  }
  
  & .comment-footer span:not(.comment-time) {
    color: var(--iopw-sys-palette-primary);
  	&:hover {
    color: var(--iopw-sys-palette-primary-lighter);
  	}
  }

  & .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: calc(var(--iopw-sys-size-8) + var(--iopw-sys-size-2));
  }

  & .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-comp-comment-control-font-size);
    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: var(--iopw-comp-comment-post-font-size);
    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: color-mix(in srgb, var(--iopw-sys-palette-gray-99) var(--iopw-sys-transparency-50), transparent);
    line-height: var(--iopw-sys-size-6);
    color: var(--iopw-sys-palette-gray-99);
    text-indent: 0;
    font-size: var(--iopw-sys-size-4);
    height: auto;
    text-align: center;
    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;
  }
}