|
|
| (5 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| * {
| | /** Room for texting things on 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-controls-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));
| |
| }
| |
| | |
| /** Flowthread- common.css **/ | |
| #flowthread {
| |
| color: var(--iopw-comp-comment-font-color);
| |
|
| |
| & .comment-body textarea,
| |
| & .comment-preview {
| |
| margin: 0;
| |
| padding: calc(var(--iopw-sys-size-24) + var(--iopw-sys-size-1));
| |
| 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);
| |
| background: color-mix(in srgb, var(--iopw-sys-palette-gray-60) var(--iopw-sys-transparency-75), transparent);
| |
| }
| |
| | |
| & .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-top: 0;
| |
| }
| |
| | |
| & .comment-preview {
| |
| background: var(--iopw-sys-palette-gray-90)
| |
| }
| |
| | |
| & .comment-toolbar {
| |
| position: relative;
| |
| height: var(--iopw-sys-size-8);
| |
| color: var(--iopw-sys-palette-gray-30);
| |
| padding-left: calc(var(--iopw-sys-size-2) + var(--iopw-sys-size-0-5));
| |
| font-size: var(--iopw-comp-comment-controls-font-size);
| |
| line-height: var(--iopw-sys-size-8);
| |
| border: var(--iopw-sys-border-width) var(--iopw-sys-border-style) var(--iopw-sys-palette-gray-80);
| |
| border-radius: 0px 0px var(--iopw-comp-comment-border-radius) var(--iopw-comp-comment-border-radius);
| |
| background: var(--iopw-sys-palette-gray-99);
| |
| margin-bottom: var(--iopw-sys-size-4)
| |
| }
| |
| | |
| & .comment-submit {
| |
| font-family: var(--iopw-comp-comment-font);
| |
| position: absolute;
| |
| height: var(--iopw-sys-size-8);
| |
| text-shadow: none;
| |
| color: var(--iopw-sys-palette-gray-30);
| |
| font-size: var(--iopw-comp-comment-controls-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-80);
| |
| 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-2);
| |
| border-radius: 0px 0px var(--iopw-comp-comment-border-radius) 0px;
| |
| outline: 0;
| |
| background: linear-gradient(0deg, transparent 10%, var(--iopw-sys-palette-primary) 35%, var(--iopw-sys-palette-primary-lighter) 100%),
| |
| repeating-linear-gradient(135deg, #F0D000 0px, #F0D000 0.15rem, #FADFAA 0.15rem, #FADFAA 0.3rem, #FADFAA 0.3rem);
| |
| clip-path: polygon(0% 0%, 100% 0, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0 100%);
| |
| }
| |
| | |
| & .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: relative;
| |
| float: left;
| |
| width: var(--iopw-sys-size-6);
| |
| height: var(--iopw-sys-size-6);
| |
| margin: var(--iopw-sys-size-1);
| |
| padding: 0;
| |
| border-radius: 10%;
| |
| outline: 0;
| |
| border: 0 var(--iopw-sys-palette-gray-99);
| |
| background-color: var(--iopw-sys-palette-gray-50);
| |
| 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-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: 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-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-post {
| |
| padding: calc(var(--iopw-sys-size-2) + var(--iopw-sys-size-0-5));
| |
| }
| |
| | |
| & .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;
| |
| position: relative;
| |
| overflow: hidden;
| |
| min-height: var(--iopw-sys-size-4);
| |
| max-width: calc(var(--iopw-sys-size-2) * 70);
| |
| }
| |
| | |
| & .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
| |
| }
| |
| }
| |
| | |
| /** Flowthread- flowthread.css **/
| |
| #flowthread {
| |
| clear: both;
| |
| margin-top: var(--iopw-sys-size-8);
| |
| | |
| & .comment-avatar {
| |
| float: left;
| |
| }
| |
| | |
| & .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);
| |
|
| |
| & .comment-user>a {
| |
| color: var(--iopw-sys-palette-primary);
| |
| }
| |
| }
| |
| | |
| & .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;
| |
| /* Added to guard against malacious position:absolute */
| |
| position: relative;
| |
| overflow: hidden;
| |
| min-height: var(--iopw-sys-size-4);
| |
| }
| |
| | |
| & .comment-footer {
| |
| font-size: var(--iopw-comp-comment-controls-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-controls-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;
| |
| }
| |
| }
| |
