User:Messing with data/vector.css: Difference between revisions
Jump to navigation
Jump to search
Another try for nested |
m Small colour adjustment |
||
(10 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
* { | * { | ||
box-sizing: border-box; | 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; | |||
} | |||
} | } |
Revision as of 23:49, 21 June 2024
* {
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;
}
}