User:Arashiryuu0/global.css

/** * Testing out UCP global CSS. */ @font-face { font-family: 'Fira Code'; src: url('https://rawgit.com/Arashiryuu/font-host-test/master/FiraCode-Regular.ttf') format('truetype'); } @font-face { font-family: 'Cascadia'; src: url('https://rawgit.com/Arashiryuu/font-host-test/master/CascadiaCodePL.ttf') format('truetype'); } /** * Language Highlighter */ html body .mw-highlight pre { padding: 12px !important; } .mw-highlight pre.javascript { --codeblockcolor: #16AB6F; }

.mw-highlight pre { --attr: data-lang; --codeblockcolor: #16A; contain: layout paint style; white-space: pre-wrap; word-break: break-all; }

.mw-highlight pre::before { display: flex; align-items: center; position: sticky; top: -7px; margin-top: -7px; margin-left: -7px; margin-bottom: 7px; padding-left: 10px; width: calc(100% + 4px); height: 24px; font-weight: 450; color: #FFF; content: attr(var(--attr, class)); text-indent: 20px; text-transform: uppercase; box-shadow: 0 0 12px var(--codeblockcolor, #16A); background-color: var(--codeblockcolor, #16A); background-image: url('https://vignette.wikia.nocookie.net/central/images/6/6b/CodeIcon.png/revision/latest?cb=20190630222746'); background-size: 20px; background-position: 5px; background-repeat: no-repeat; }

.page-content .mw-highlight .o, .page-content .mw-highlight .nb { color: unset; }

.page-content .mw-highlight .k, .page-content .mw-highlight .kd, .page-content .mw-highlight .kc, .page-content .mw-highlight .nn, .page-content .mw-highlight .ow, .page-content .mw-highlight .ne, /* :is support test */ /* :-webkit-any(.kd, .kc) -> :is(.kd, .kc) */ .page-content .mw-highlight :is(.kd, .kc) { font-weight: normal; } /** * Code Editor */ .ve-init-mw-desktopArticleTarget .mw-editfont-monospace, .ve-init-mw-desktopArticleTarget .CodeMirror, .ve-init-mw-desktopArticleTarget .CodeMirror :is(.CodeMirror-code, .CodeMirror-lines) { font-family: 'Cascadia', 'Fira Code', 'Consolas', monospace; font-weight: 200; font-size: 0.835rem; /**	 * 0.875 - Fira Code * 0.835 - Cascadia */ } body.mediawiki[class*="_js"] .CodeMirror-gutters, body.mediawiki[class*="_js"] .CodeMirror { background: #1E1E1E; color: #DCDCDC; } body.mediawiki[class*="_js"] .CodeMirror-gutters { border-right-color: #333 !important; } body.mediawiki[class*="_js"] .CodeMirror.cm-s-default .cm-comment { color: #57A64A; font-style: normal; } body.mediawiki[class*="_js"] .CodeMirror.cm-s-default .cm-keyword, body.mediawiki[class*="_js"] .CodeMirror.cm-s-default .cm-atom { color: #569CD6; }

body.mediawiki[class*="_js"] .CodeMirror.cm-s-default .cm-string { color: #D69D85; } body.mediawiki[class*="_js"] .CodeMirror.cm-s-default .cm-def, body.mediawiki[class*="_js"] .CodeMirror.cm-s-default .cm-variable-2, body.mediawiki[class*="_js"] .mw-highlight .o, body.mediawiki[class*="_js"] .mw-highlight .k, body.mediawiki[class*="_js"] .mw-highlight .kd, body.mediawiki[class*="_js"] .mw-highlight .kc { color: inherit; font-weight: normal; }

body.mediawiki[class*="_js"] .mw-highlight .kr { font-weight: normal; color: unset; } body.mediawiki[class*="_js"] .CodeMirror.cm-s-default .cm-variable { color: #4EC9B0; } body.mediawiki[class*="_js"] .CodeMirror.cm-s-default .cm-number { color: #B8D7A3; } body.mediawiki[class*="_js"] .ve-ui-codeEditorSurface .ve-ce-attachedRootNode { caret-color: #DCDCDC; } /** * Codeblock font. */ .mw-parser-output .mw-highlight pre { font-family: 'Cascadia', 'Fira Code', 'Consolas', monospace; font-weight: 200; font-size: 0.835rem; /**	 * 0.875 - Fira Code * 0.835 - Cascadia */ } /** * VS2015 SyntaxHighlight theme. */ .mw-parser-output .mw-highlight .hljs:is(.javascript, .typescript) { background: #1E1E1E; color: #DCDCDC; } /** * JS only. */ .mw-highlight .hljs:is(.javascript, .typescript) .hljs-attr, .mw-highlight .hljs:is(.javascript, .typescript) .hljs-title { color: unset !important; } .mw-highlight .hljs:is(.javascript, .typescript) .nx .hljs-keyword { color: unset; } .mw-highlight .hljs:is(.javascript, .typescript) .hljs-number { color: #B8D7A3; } .mw-highlight .hljs:is(.javascript, .typescript) .cm, .mw-highlight .hljs:is(.javascript, .typescript) .c1, .mw-highlight .hljs:is(.javascript, .typescript) .c1 .hljs-comment, .mw-highlight .hljs:is(.javascript, .typescript) .cm .hljs-comment { color: #57A74A; font-style: normal !important; } .mw-highlight .hljs:is(.javascript, .typescript) :is(.hljs-doctag, .hljs-formula, .hljs-keyword, .hljs-literal) { color: #569CD6; } .mw-highlight .hljs:is(.javascript, .typescript) :is(.hljs-meta, .hljs-addition, .hljs-attribute, .hljs-meta-string, .hljs-regexp, .hljs-string) { color: #D69D85; } .mw-highlight .hljs:is(.javascript, .typescript) .hljs-built_in, .mw-highlight .hljs:is(.javascript, .typescript) .hljs-class .hljs-title { color: #4EC9B0; } /** * CSS only. */ .mw-highlight .css.hljs { background: #1E1E1E; } .mw-highlight .css.hljs :is(.k, .nt, .kc, .nc) { font-weight: normal; } .mw-highlight .css.hljs :is(.kc, .o) { color: inherit; } .mw-highlight .css.hljs :is(.c, .hljs-comment) { font-style: normal; }

/* mw-highlight Codeblock Background Fix */ .mw-highlight { background: unset; } /* Ace Editor */ .ace_print-margin { visibility: hidden !important; } /* DisplayClock */ position: relative; left: calc(100% - 22vw); margin-top: -27px; font-size: 12px; font-weight: 700; text-transform: uppercase; line-height: 1.25; max-width: 140px; left: clamp(50%, 75%, 100%); }	cursor: pointer; transition: text-shadow 250ms; }	text-shadow: 0 0 5px currentColor; } /*@end@*/
 * 1) DisplayClock {
 * 1) DisplayClock .clock {
 * 1) DisplayClock .clock.hovered {