MediaWiki:Common.css

/*

CSS placed here will be applied to all skins

CONTENTS

Fonts                15 Styling              27 Typefaces          28 M3 components      40 Mobile            120



/* Fonts */ @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Yantramanav:wght@100;300;400;500;700;900&material+symbols+outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

@font-face {font-family: "Google Sans"; font-weight: normal; font-style: normal; src: url("//db.onlinewebfonts.com/t/000be6a5acfcd4e4a425e9f1bb6c80f0.eot"); src: url("//db.onlinewebfonts.com/t/000be6a5acfcd4e4a425e9f1bb6c80f0.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/000be6a5acfcd4e4a425e9f1bb6c80f0.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/000be6a5acfcd4e4a425e9f1bb6c80f0.woff") format("woff"), url("//db.onlinewebfonts.com/t/000be6a5acfcd4e4a425e9f1bb6c80f0.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/000be6a5acfcd4e4a425e9f1bb6c80f0.svg#Google Sans") format("svg"); } @font-face {font-family: "Google Sans"; font-weight: normal; font-style: italic; src: url("//db.onlinewebfonts.com/t/69b6dafcd18436d717d1c4a71c4eb6b1.eot"); src: url("//db.onlinewebfonts.com/t/69b6dafcd18436d717d1c4a71c4eb6b1.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/69b6dafcd18436d717d1c4a71c4eb6b1.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/69b6dafcd18436d717d1c4a71c4eb6b1.woff") format("woff"), url("//db.onlinewebfonts.com/t/69b6dafcd18436d717d1c4a71c4eb6b1.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/69b6dafcd18436d717d1c4a71c4eb6b1.svg#Google Sans") format("svg"); } @font-face {font-family: "Google Sans"; font-weight: 500; font-style: normal; src: url("//db.onlinewebfonts.com/t/0e3f1c9efebea39cb811fbb86c2fc53f.eot"); src: url("//db.onlinewebfonts.com/t/0e3f1c9efebea39cb811fbb86c2fc53f.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/0e3f1c9efebea39cb811fbb86c2fc53f.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/0e3f1c9efebea39cb811fbb86c2fc53f.woff") format("woff"), url("//db.onlinewebfonts.com/t/0e3f1c9efebea39cb811fbb86c2fc53f.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/0e3f1c9efebea39cb811fbb86c2fc53f.svg#Google Sans Medium") format("svg"); } @font-face {font-family: "Google Sans"; font-weight: 500; font-style: italic; src: url("//db.onlinewebfonts.com/t/d2e7466051a55d11378042f258e951c1.eot"); src: url("//db.onlinewebfonts.com/t/d2e7466051a55d11378042f258e951c1.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/d2e7466051a55d11378042f258e951c1.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/d2e7466051a55d11378042f258e951c1.woff") format("woff"), url("//db.onlinewebfonts.com/t/d2e7466051a55d11378042f258e951c1.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/d2e7466051a55d11378042f258e951c1.svg#Google Sans Medium") format("svg"); } @font-face {font-family: "Google Sans"; font-weight: bold; font-style: normal; src: url("//db.onlinewebfonts.com/t/371213c6129c24324f5aa2e2e61319af.eot"); src: url("//db.onlinewebfonts.com/t/371213c6129c24324f5aa2e2e61319af.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/371213c6129c24324f5aa2e2e61319af.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/371213c6129c24324f5aa2e2e61319af.woff") format("woff"), url("//db.onlinewebfonts.com/t/371213c6129c24324f5aa2e2e61319af.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/371213c6129c24324f5aa2e2e61319af.svg#Google Sans") format("svg"); } @font-face {font-family: "Google Sans"; font-weight: bold; font-style: italic; src: url("//db.onlinewebfonts.com/t/b51a2098e785c5323cb72f371ca0cde7.eot"); src: url("//db.onlinewebfonts.com/t/b51a2098e785c5323cb72f371ca0cde7.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/b51a2098e785c5323cb72f371ca0cde7.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/b51a2098e785c5323cb72f371ca0cde7.woff") format("woff"), url("//db.onlinewebfonts.com/t/b51a2098e785c5323cb72f371ca0cde7.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/b51a2098e785c5323cb72f371ca0cde7.svg#Google Sans") format("svg"); } @font-face {font-family: "Google Sans Text"; font-weight: normal; font-style: normal; src: url("//db.onlinewebfonts.com/t/41cdafd19e156a1f74759f9c88b878ff.eot"); src: url("//db.onlinewebfonts.com/t/41cdafd19e156a1f74759f9c88b878ff.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/41cdafd19e156a1f74759f9c88b878ff.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/41cdafd19e156a1f74759f9c88b878ff.woff") format("woff"), url("//db.onlinewebfonts.com/t/41cdafd19e156a1f74759f9c88b878ff.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/41cdafd19e156a1f74759f9c88b878ff.svg#Google Sans Text") format("svg"); } @font-face {font-family: "Google Sans Text"; font-weight: bold; font-style: normal; src: url("//db.onlinewebfonts.com/t/6a8dc683d1b4db924a75e5a0e3ed8410.eot"); src: url("//db.onlinewebfonts.com/t/6a8dc683d1b4db924a75e5a0e3ed8410.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/6a8dc683d1b4db924a75e5a0e3ed8410.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/6a8dc683d1b4db924a75e5a0e3ed8410.woff") format("woff"), url("//db.onlinewebfonts.com/t/6a8dc683d1b4db924a75e5a0e3ed8410.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/6a8dc683d1b4db924a75e5a0e3ed8410.svg#Google Sans Text Medium") format("svg"); } @font-face {font-family: "YouTube Sans"; font-weight: 300; font-style: normal; src: url("//db.onlinewebfonts.com/t/b28c4157fdb768a116e208e3fd1fbd63.eot"); src: url("//db.onlinewebfonts.com/t/b28c4157fdb768a116e208e3fd1fbd63.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/b28c4157fdb768a116e208e3fd1fbd63.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/b28c4157fdb768a116e208e3fd1fbd63.woff") format("woff"), url("//db.onlinewebfonts.com/t/b28c4157fdb768a116e208e3fd1fbd63.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/b28c4157fdb768a116e208e3fd1fbd63.svg#YouTube Sans Dark") format("svg"); } @font-face {font-family: "YouTube Sans"; font-weight: normal; font-style: normal; src: url("//db.onlinewebfonts.com/t/d269b1b236a367929c8a8be4f8d61522.eot"); src: url("//db.onlinewebfonts.com/t/d269b1b236a367929c8a8be4f8d61522.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/d269b1b236a367929c8a8be4f8d61522.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/d269b1b236a367929c8a8be4f8d61522.woff") format("woff"), url("//db.onlinewebfonts.com/t/d269b1b236a367929c8a8be4f8d61522.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/d269b1b236a367929c8a8be4f8d61522.svg#YouTube Sans Dark") format("svg"); } @font-face {font-family: "YouTube Sans"; font-weight: 500; font-style: normal; src: url("//db.onlinewebfonts.com/t/769632052aeb8472827d0087d9fee9c5.eot"); src: url("//db.onlinewebfonts.com/t/769632052aeb8472827d0087d9fee9c5.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/769632052aeb8472827d0087d9fee9c5.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/769632052aeb8472827d0087d9fee9c5.woff") format("woff"), url("//db.onlinewebfonts.com/t/769632052aeb8472827d0087d9fee9c5.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/769632052aeb8472827d0087d9fee9c5.svg#YouTube Sans Dark") format("svg"); } @font-face {font-family: "YouTube Sans"; font-weight: bold; font-style: normal; src: url("//db.onlinewebfonts.com/t/48b6a162de3c1a9cce6e9e445f5a04cd.eot"); src: url("//db.onlinewebfonts.com/t/48b6a162de3c1a9cce6e9e445f5a04cd.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/48b6a162de3c1a9cce6e9e445f5a04cd.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/48b6a162de3c1a9cce6e9e445f5a04cd.woff") format("woff"), url("//db.onlinewebfonts.com/t/48b6a162de3c1a9cce6e9e445f5a04cd.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/48b6a162de3c1a9cce6e9e445f5a04cd.svg#YouTube Sans Dark") format("svg"); }

/* Animations */

@-webkit-keyframes google-colors-bg { 0%  {background: #4285F4;} 20% {background: #4285F4;} 25% {background: #DB4437;} 45% {background: #DB4437;} 50% {background: #F4B400;} 70% {background: #F4B400;} 75% {background: #0F9D58;} 95% {background: #0F9D58;} 100% {background: #4285F4;} }

@keyframes google-colors-bg { 0%  {background: #4285F4;} 20% {background: #4285F4;} 25% {background: #DB4437;} 45% {background: #DB4437;} 50% {background: #F4B400;} 70% {background: #F4B400;} 75% {background: #0F9D58;} 95% {background: #0F9D58;} 100% {background: #4285F4;} }

@-webkit-keyframes google-colors-bc { 0%  {border-bottom-color: #4285F4;} 20% {border-bottom-color: #4285F4;} 25% {border-bottom-color: #DB4437;} 45% {border-bottom-color: #DB4437;} 50% {border-bottom-color: #F4B400;} 70% {border-bottom-color: #F4B400;} 75% {border-bottom-color: #0F9D58;} 95% {border-bottom-color: #0F9D58;} 100% {border-bottom-color: #4285F4;} }

@keyframes google-colors-bc { 0%  {border-bottom-color: #4285F4;} 20% {border-bottom-color: #4285F4;} 25% {border-bottom-color: #DB4437;} 45% {border-bottom-color: #DB4437;} 50% {border-bottom-color: #F4B400;} 70% {border-bottom-color: #F4B400;} 75% {border-bottom-color: #0F9D58;} 95% {border-bottom-color: #0F9D58;} 100% {border-bottom-color: #4285F4;} }

/* Styling */ h1, h2 { font-family: "Google Sans", Roboto, "Helvetica Neue", Arial, sans-serif !important; } h1, h2 { font-weight: normal !important; } h3, h4, h5, h6, p, div, header, footer, label, input { font-family: "Google Sans Text", Roboto, "Helvetica Neue", Arial, sans-serif !important; } code, pre, textarea, samp, kbd, var { font-family: "Roboto Mono", "Courier New", monospace !important; } .warningbox, .mw-warning-with-logexcerpt, .m3-large { width: calc(100%-32px); padding: 64px; margin: 16px; border-radius: 64px; box-sizing: border-box; }

div.editOptions { padding: 32px 64px 64px; border: none; background: #ccecfb; color: #30627a; border-radius: 0 0 64px 64px !important; }

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button, .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button, .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { border-radius: 10000px; background: rgba(0,0,0,0); color: inherit; }

.oo-ui-textInputWidget .oo-ui-inputWidget-input { background: rgba(0,0,0,0); border-radius: 6px; color: inherit; }

.wikiEditor-ui .wikiEditor-ui-top { border: none; }

.wikiEditor-ui-toolbar { padding: 64px 64px 32px; border: none; background: #ccecfb; color: #30627a; border-radius: 64px 64px 0 0 !important; }

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { background: #2a4b8d; color: white; }

.mw-editform #wpTextbox1 { padding: 32px; background: #ccecfb; color: #30627a; border: 1px solid #30627a; }

.color-right, .color-middle, .color-left { background: #4285F4; }

.color-right, .color-left { -webkit-animation: google-colors-bg 4s infinite 0s; animation: google-colors-bg 4s infinite 0s; }

.color-middle { -webkit-animation: google-colors-bg 4s infinite -0.1s; animation: google-colors-bg 4s infinite -0.1s; }

border-bottom: 4px solid #4285F4; -webkit-animation: google-colors-bc 4s infinite -2s; animation: google-colors-bc 4s infinite -2s; }
 * 1) mw-content-container {

.m3-large::after { content: ""; clear: both; display: table; }

.m3-fab, .m3-extended-fab { padding: 8px 24px; margin: 8px; border-radius: 16px; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3), 0 4px 16px 4px rgba(0,0,0,0.05); float: right; display: inline; }

.warningbox, .mw-warning-with-logexcerpt { background: #fcedeb !important; color: #893127 !important; border: none !important; padding: 64px !important; }

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'GRAD' 0; }

/* For mobile: */ @media only screen and (max-width: 600px) { .warningbox, .mw-warning-with-logexcerpt, .m3-large { padding: 48px 32px !important; border-radius: 48px !important; }

div.editOptions { padding: 32px 32px 48px; border-radius: 0 0 48px 48px !important; }

.wikiEditor-ui-toolbar { padding: 48px 32px 32px; border-radius: 48px 48px 0 0 !important; } }