MediaWiki:PseudoForum.css

/* This is the CSS for the PseudoForum project. /*************************************************/ /*************** TABLE OF CONTENTS ***************/ /************************************************** TABLE OF CONTENTS MAIN CODE UNIVERSAL BOARD GENERAL MAIN POST Triangle Follow REPLIES LOADING NEW & EDIT Toolbar visualModal KUDOS USER MESSAGE TOOLBAR Timestamp Buttons Dropdown Triangle REMOVED & DELETED REPLIES Removed & deleted View REFRESH BUTTON ANIMATIONS /*************************************************/ /******************* MAIN CODE *******************/ /*************************************************/ /* UNIVERSAL */ .pf-thread a { cursor: pointer; } .pf-thread textarea { box-sizing: border-box; display: block; outline: none; overflow: hidden; resize: none; width: 100%; }   overflow: visible; } .disabled { animation: none !important; cursor: default !important; opacity: 0.5 !important; outline: none !important; transition: none !important; } .icon { background: center / var(--icon-sz) no-repeat; width: var(--icon-sz); height: var(--icon-sz); } .pf-btn { border: 1px solid var(--text); color: var(--text); cursor: pointer; font: bold 10px/16px Rubik, sans-serif; margin-left: 8px; padding: 7px 12px; text-transform: uppercase; transition: 0.3s; display: flex; align-items: center; justify-content: center; } .pf-btn:focus { outline: none; } .pf-btn.pf-btn-main { background: var(--menu); border-color: var(--menu); color: var(--contrast); } .pf-btn:not(.disabled):hover, .pf-btn:not(.disabled):focus { transform: scale(1.1); } .pf-btn.pf-btn-main:not(.disabled):hover, .pf-btn.pf-btn-main:not(.disabled):focus { background: var(--gradient); border-color: var(--gradient); } .pf-btn .icon { --icon-sz: 18px; margin-right: 6px; } .pf-round-btn { background: var(--menu) linear-gradient(90deg, var(--menu) 0% 20%, #fa2 50%, var(--menu) 80% 100%) 0% / 500%; border-radius: 14px; box-sizing: border-box; color: black; cursor: pointer; font: bold 10px Rubik, sans-serif; margin-left: 5px; padding: 5px 8px; position: relative; /* Allow positioning of .mtb-dropdown */ display: flex; align-items: center; height: 28px; } .pf-round-btn:hover { background-position: 100%; transition: 1.2s; /* No transition off hover */ } .pf-round-btn .icon { --icon-sz: 18px; }
 * 1) WikiaArticle {

/* BOARD */ .pf-board { background: var(--pf-bg); border: 1px solid var(--pf-border); margin-bottom: 15px; padding: 5px 12px; }

/* GENERAL */ .pf-1 .pf-msg-body, .pf-replies { margin-left: 75px; } .pf-msg { position: relative; /* Allow positioning of .u-info */ } .pf-avatar { float: left; } .pf-avatar img { width: 30px; } .pf-text { margin: 5px 0; } .pf-msg .pf-text > p { margin: 0; }

/* MAIN POST */ .pf-1 { margin-bottom: 12px; } .pf-1 .pf-avatar img { width: 50px; } .pf-1 .pf-msg-body { background: var(--pf-bg); border: 1px solid var(--pf-border); border-radius: 10px; padding: 10px; position: relative; /* Allow positioning of triangle */ } .pf-1 .pf-title { font-size: 18px; font-weight: bold; }   /* Triangle */ .pf-1 .pf-msg-body::before, .pf-1 .pf-msg-body::after { border-style: solid; content: ""; position: absolute; }   .pf-1 .pf-msg-body::before { border-color: var(--pf-border) var(--pf-border) transparent transparent; border-width: 11px; top: 14px; left: -22px; }   .pf-1 .pf-msg-body::after { border-color: var(--pf-bg) var(--pf-bg) transparent transparent; border-width: 10px; top: 15px; left: -19.5px; }   /* Follow */ .pf-follow { float: right; }   .pf-follow.pf-btn-main:not(:hover) .pf-follow-text::after { content: "ING"; }   .pf-follow.pf-btn-main:hover .pf-follow-text::before { content: "UN"; }   .pf-follow             .icon {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/1/1a/Follow.svg");} .pf-follow.pf-btn-main .icon {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/b/b7/Following.svg");}

/* REPLIES */ .pf-replies .pf-msg { border-top: 1px solid var(--border); padding: 12px 0; } .pf-replies .pf-msg-body { margin-left: 48px; } .pf-replies .pf-user { margin: 5px 0; }

/* LOADING */ .pf-loading { text-align: center; } .pf-loading .icon { --icon-sz: 20px; animation: rotator 0.5s linear infinite; background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/0/0b/Spinner.svg"); margin: auto; } .oasis-dark-theme .pf-loading .icon { background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/6/6b/Spinner_white.svg"); }

/* NEW & EDIT */ .pf-edit { border: 1px solid var(--pf-border); border-radius: 18px; /* height of :not(.active) / 2 */ font: 14px/18px Ubuntu Mono; padding: 8px 14px; height: 210px; transition: height 0.4s ease-out; } .pf-edit:focus { box-shadow: 0 0 4px var(--menu); } .pf-msg.pf-new { border-bottom: none; margin-bottom: 0; } .pf-new:not(.active) .pf-avatar, .pf-new:not(.active) .pf-edit-toolbar { display: none; } .pf-new:not(.active) .pf-msg-body { margin-left: 0; } .pf-new:not(.active) .pf-edit { height: 36px; /* font-size + padding + border */ } .pf-editing .pf-text, .pf-editing .pf-msg-toolbar { display: none; } .pf-editing .pf-edit { margin-top: 10px; } /* Toolbar */ .pf-edit-toolbar { margin-top: 10px; display: flex; align-items: flex-start; justify-content: space-between; } .etb-fmt { display: flex; } .etb-fmt a { background-color: var(--pf-bg); border: 1px solid var(--pf-border); border-radius: 4px; margin-right: 5px; } .etb-fmt .icon { --icon-sz: 16px; display: block; padding: 2px; } .etb-fmt .icon.source    {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/4/41/Pen.svg");} .etb-fmt .icon.visual    {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/0/01/Eye.svg");} .etb-fmt .icon.b         {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/2/2f/B.svg");} .etb-fmt .icon.i         {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/9/96/I.svg");} .etb-fmt .icon.bernie2020 {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/0/0b/Leng.svg");} .etb-fmt .icon.u         {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/9/9f/U.svg");} .etb-fmt .icon.link      {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/5/58/Link.svg");} .etb-fmt .icon.file      {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/d/da/File.svg");} .etb-separator { background: var(--pf-border); margin-right: 5px; width: 1px; height: 22px; } .etb-msg { display: flex; flex-direction: row-reverse; } .pf-new .etb-compare { display: none; } .etb-reply:not(:hover):not(:focus) { animation: tempt 4s infinite; } .etb-reply  .icon {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/5/5c/Reply.svg");} .etb-save   .icon {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/e/e2/Save.svg");} .etb-preview .icon {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/0/01/Eye.svg");} .etb-compare .icon {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/a/a6/Compare.svg");} /* visualModal */ .etb-modal { color: black; font: 16px/22px Rubik, sans-serif; } .etb-modal h1 { font-size: 28px; font-weight: bold; margin-bottom: 17px; text-align: center; } .etb-modal h2 { border-bottom: 1px solid; font-size: 20px; margin: 16px 0 10px; } .etb-modal p { margin: 6px 0; } .etb-modal code, .etb-modal pre { border: 1px solid var(--border); font-family: Ubuntu Mono; line-height: 16px; padding: 2px; } .etb-modal pre { white-space: pre-wrap; } .etb-modal ul { list-style: square; margin-left: 31.5px; } .etb-modal-section { margin: -5px; display: flex; flex-wrap: wrap; } .etb-modal-subsection { background: #bfbfbf66; box-sizing: border-box; cursor: help; margin: 5px; padding: 10px; transition: 0.5s; display: flex; flex-direction: column; width: calc(50% - 10px); } .etb-modal-subsection:hover { box-shadow: 0 0 20px #555; } .etb-modal-subsection > div:not(:first-child) { margin-top: 5px; } .etb-modal-code { margin-left: 15px; } .etb-modal-explain { font-size: 14px; line-height: 18px; } .etb-modal-subsection b { font-weight: bold; } .etb-modal-subsection i { font-style: italic; } .etb-modal-subsection a.external::after { content: ""; background: url("https://slot1-images.wikia.nocookie.net/__cb1586345762246/common/skins/shared/images/sprite.png") -1198px 0 no-repeat; display: inline-block; margin-left: 3px; vertical-align: text-top; width: 10px; height: 16px; } .etb-modal-subsection h2 { border-bottom: 1px solid; margin: 0 0 4px; padding-bottom: 3px; } .etb-modal-subsection ol { list-style: decimal; margin-left: 31.5px; } .etb-modal-subsection dd { margin-left: 24px; } /* editModal */ .pf-edit-modal { min-height: 150px; } .pf-edit-modal section { display: flex; flex-direction: column; justify-content: space-between; } .pf-edit-modal .pf-edit-btn-wrapper { display: flex; flex-direction: row-reverse; } .pf-edit-modal footer { display: none; }

/* KUDOS */ .pf-kudos { display: flex; float: right; user-select: none; flex-direction: column; justify-content: space-between; width: 110px; height: 32px; } .pf-replies .pf-kudos { margin-top: -7px; } .k-not-bar { display: flex; justify-content: space-between; } .k-btn-count { display: flex; align-items: flex-end; justify-content: space-between; width: 50px; } .k-btn { cursor: pointer; fill: var(--menu); opacity: 0.5; width: 19px; height: 19px; } .k-btn.down { opacity: 1; } .k-count { font: bold 12px Roboto; text-align: center; white-space: nowrap; width: 25px; } .k-bar { background: rgba(var(--menu-rgb), 0.5); } .k-bar-inner { background: var(--menu); transition: width 0.2s; height: 3px; }

/* USER */ .pf-user { font-weight: bold; } .u-inner { display: inline; } .u-info { background: var(--page); border: 1px solid var(--pf-border); border-radius: 10px; font: 14px/16px Ubuntu; padding: 15px; word-break: break-word; display: flex; flex-direction: column; position: absolute; top: 0; left: 0; z-index: 1000; width: 220px; } .u-info > :not(:first-child) { margin-top: 10px; } .u-header { display: flex; align-items: center; } .u-avatar img { border-radius: 100%; margin-right: 15px; width: 50px; } .u-username { font-weight: bold; line-height: 20px; } .u-userlinks, .u-id { font-size: 12px; line-height: 12px; } .u-info > .u-groups { margin: 8px -2px -2px; display: flex; flex-wrap: wrap; } .u-tag { border: 1px solid; border-radius: 9px; font: 12px Ubuntu Mono; margin: 2px; padding: 2px 6px; text-transform: uppercase; /* Default unstyled tag */ background: aliceblue; color: blue; } .u-tag.bureaucrat { background: plum; color: purple; } .u-tag.sysop { background: aquamarine; color: teal; } .u-tag.content-mod { background: gold; color: brown; } .u-tag.rollback { background: khaki; color: orangered; } .u-tag.thread-mod { background: lawngreen; color: darkgreen; } .u-tag.chat-mod { background: orange; color: red; } .u-stats { display: flex; } .u-stat { flex: 1 1 0; } .u-stat:not(:first-child) { margin-left: 10px; } .u-stat a { background: var(--pf-bg); color: black; font-size: 13px; padding: 5px 0; transition: 0.5s; display: flex; align-items: center; flex-direction: column; justify-content: space-around; height: 40px; } .u-stat a:hover { background: var(--pf-border); text-decoration: none; } .u-stat .icon { --icon-sz: 20px; } .u-stat.total .icon {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/4/41/Pen.svg");} .u-stat.forum .icon {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/1/14/Forum.svg");} .u-stat.first .icon {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/7/7f/Clock.svg");} .u-forumbio textarea { background: none; border: none; font: 14px Rubik, sans-serif; padding: 0; } .u-btn-wrapper { margin-top: 10px; display: flex; flex-direction: row-reverse; } .u-cancel { border: 1px solid; background: transparent; }

/* MESSAGE TOOLBAR */ .pf-msg-toolbar { display: flex; align-items: center; justify-content: space-between; height: 28px; /* Height of buttons */ } /* Timestamp */ .mtb-timestamp a { font-size: 10px; } .mtb-timestamp .mtb-diff, .mtb-timestamp .mtb-permalink { color: rgba(var(--text-rgb), 0.75); text-decoration: none; } .mtb-timestamp a:not(:hover) .mtb-time, .mtb-timestamp a:hover .mtb-timeago { display: none; } /* Buttons */ .pf-msg:not(:hover) .mtb-btn-wrapper { display: none; } .mtb-btn-wrapper { display: flex; } .mtb-btn-more { border-radius: 100%; padding: 5px; } .mtb-btn-quote .icon { margin-right: 3px; } .mtb-btn-quote .icon {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/1/14/Forum.svg");} .mtb-btn-more > .icon {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/5/5a/More.svg");} /* Dropdown */ .mtb-btn-more:not(.active) .mtb-dropdown { display: none; }   .mtb-dropdown { background: white; border: 1px solid var(--border); border-radius: 4px; cursor: default; padding: 7px 9px; display: flex; flex-direction: column; position: absolute; top: 100%; right: 0; z-index: 1000; }       /* Triangle */ .mtb-dropdown::before, .mtb-dropdown::after { content: ""; border-color: transparent; border-style: none solid solid; position: absolute; bottom: 100%; right: 5px; }       .mtb-dropdown::before { border-width: 9px; border-bottom-color: var(--border); }       .mtb-dropdown::after { border-width: 8px; border-bottom-color: white; }   .mtb-dropdown a { color: #39424d; font: 14px/14px Rubik, sans-serif; padding: 11px 9px; white-space: nowrap; display: flex; align-items: center; }   .mtb-dropdown a:hover { background: rgba(var(--link-rgb), 0.1); color: var(--link); text-decoration: none; transition: 0.3s; }   .mtb-dropdown a .icon { --icon-sz: 22px; display: block; margin: -2px 9px -2px -2px; }   .mtb-dropdown .mtb-edit .icon        {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/4/41/Pen.svg");} .mtb-dropdown .mtb-view-source .icon {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/d/d4/View_source.svg");} .mtb-dropdown .mtb-report .icon     {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/a/a3/Report.svg");} .mtb-dropdown .mtb-remove .icon     {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/c/ca/Remove.svg");} .mtb-dropdown .mtb-delete .icon     {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/4/4c/Delete.svg");} .mtb-dropdown .mtb-close .icon      {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/3/3e/Close.svg");} .mtb-dropdown .mtb-reopen .icon     {background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/f/f4/Reopen.svg");}

/* REMOVED & DELETED REPLIES */ /* Removed & deleted */ .pf-msg.removed { padding: 0; } .pf-msg.removed > :not(.r-removed) { display: none; } .r-removed, .pf-msg.deleted { font-size: 11px; padding: 5px; text-align: center; } /* View */ .pf-msg.view > .pf-avatar, .pf-msg.view > .pf-msg-body > .pf-kudos, .pf-msg.view > .pf-msg-body > .pf-user > .u-inner > a, .pf-msg.view > .pf-msg-body > .pf-text, .pf-msg.view > .pf-msg-body > .pf-msg-toolbar > .mtb-timestamp, .pf-msg.view > .pf-msg-body > .pf-msg-toolbar > .mtb-btn-wrapper > .mtb-btn-more > .icon { opacity: 0.5; } .pf-msg.view > .pf-msg-body > .pf-msg-toolbar > .mtb-btn-wrapper > .mtb-btn-more { background: rgba(var(--menu-rgb), 0.5); } .pf-msg.view .r-removed, .pf-msg.view .mtb-btn-quote { display: none; } .r-view { background: var(--pf-bg); border: 1px solid var(--pf-border); margin-bottom: 12px; padding: 5px 10px; display: flex; justify-content: space-between; } .r-by { font-size: 11px; } .r-time { color: rgba(var(--text-rgb), 0.75); font-size: 10px; } .r-buttons { text-align: right; }

/* REFRESH BUTTON */ .pf-refresh { background-color: var(--menu); border-radius: 100%; box-shadow: 0px 4px 6px #0003, 0px 6px 10px #0002, 0px 2px 18px #0001; cursor: pointer; padding: 10px; transition: 0.3s; position: fixed; right: 50px; bottom: 50px; } .pf-refresh:hover { background: var(--gradient); } .pf-refresh .icon { --icon-sz: 35px; animation: spin 1s infinite linear; background-image: url("https://vignette.wikia.nocookie.net/climbthestairs/images/0/0b/Refresh.svg"); }

/* ANIMATIONS */ @keyframes flip { 50% {transform: rotateY(180deg);} 100% {transform: rotateY(360deg);} } @keyframes tempt { 5% {transform: scale(1);} 10% {transform: scale(0.9);} 15% {transform: scale(1.15);} 20% {transform: scale(1.15) rotate(-5deg);} 25% {transform: scale(1.15) rotate(5deg);} 30% {transform: scale(1.15) rotate(-3deg);} 35% {transform: scale(1.15) rotate(3deg);} 40% {transform: scale(1.15);} 50% {transform: scale(1);} } @keyframes spin { 0%  {transform: rotateX(180deg) rotateZ(360deg);} 50% {transform: rotateX(180deg) rotateZ(180deg);} 100% {transform: rotateX(180deg) rotateZ(0);} }