CURRENT MISSION: Conclude the 2026 soyjak.party hack page, aswell as any pages relating to it, such as the Summer 2026 Crisis page.
Update Quotecord with any relevant info. See the blackboard for more info.

MediaWiki:Common.css

From Soyjak Wiki, the free ensoyclopedia
Revision as of 12:20, 13 August 2026 by Cobblestone (talk | contribs)
Jump to navigationJump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */

/* CSS for QOL auto complete */
.username-autocomplete {
    position: absolute;
    z-index: 999999;
    min-width: 200px;
    max-width: 350px;
    max-height: 250px;
    overflow-y: auto;

    background: var(--background-color-base, #fff);
    color: var(--color-base, #202122);

    border: 1px solid var(--border-color-base, #a2a9b1);
    border-radius: 3px;

    box-shadow: 0 3px 10px rgb(0 0 0 / .25);

    font: 12px sans-serif;
}

.username-autocomplete-result {
    padding: 5px 8px;
    cursor: pointer;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.username-autocomplete-result:hover,
.username-autocomplete-result.selected {
    background: var(
        --background-color-interactive-subtle,
        #eaecf0
    );
}

.username-autocomplete-result img {
    width: 24px;
    height: 24px;
    flex: none;
    object-fit: contain;
}

.username-autocomplete-empty {
    padding: 7px 10px;

    color: var(--color-subtle, #72777d);
    font-style: italic;
}


 /* CSS for timeline module */
 .easy-timeline-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

.easy-timeline {
    position: relative;
    box-sizing: border-box;
}

.easy-timeline-plot {
    position: absolute;
}

.easy-timeline-grid-major,
.easy-timeline-grid-minor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    pointer-events: none;
}

.easy-timeline-grid-major {
    z-index: 1;
}

.easy-timeline-grid-minor {
    z-index: 0;
}

.easy-timeline-scale-label {
    position: absolute;
    top: 100%;
    padding-top: 4px;
    font-size: 12px;
    transform: translateX(-50%);
    white-space: nowrap;
}

.easy-timeline-bar {
    position: absolute;
    z-index: 2;
    min-width: 1px;
}

.easy-timeline-bar-label {
    position: absolute;
    left: 100%;
    top: 0;
    display: block;
    white-space: nowrap;
    line-height: 1;
}

.easy-timeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.easy-timeline-legend-entry {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.easy-timeline-legend-swatch {
    width: 12px;
    height: 12px;
    flex: none;
    border: 1px solid rgb(0 0 0 / 25%);
}

.easy-timeline-text {
    position: absolute;
    z-index: 3;
    white-space: nowrap;
}

/* Gallery controls */
@media screen and (min-width:550px) {
  .mobilegallerycontrolsbr {display: none}
}

/* Client side "<choose uncached>" replacement test */
/*.choose-uncached {display: inline}*/
.choose-uncached .choose-option {display: none}
.client-nojs .choose-uncached .choose-option:first-child {display: inline}
body.page-Main_Page.action-view #siteSub,
body.page-Main_Page.action-submit #siteSub {
    display: none;
}

.rotate {   animation: rotation 1s infinite linear;   display: inline-block;   overflow: hidden;
  word-break: break-all;
  max-width: 100%;}  @keyframes rotation {   from {     transform: rotateX(0deg);   }   to {     transform: rotateX(359deg);   } }

/* custom link colors
examples of usage:
use <span class="redtext">[[LINK TEXT]]</span>
or <span class="darklink">[[LINK TEXT]]</span>
*/
span.redtext a {
	color:darkred;
	/* use this span class to make yer link dark red { 8 ^ ) }}*/
}
span.darklink a {
	color:darkblue;
	/* should solve the problem where links are harder to read...
	this mainly applies to red background templates */
}


/* Colored usernames for prominent users */

/* Sharty admins */
a[href="/User:Quote"] {
    font-weight:bold;
    color: #ff0000 !important;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration: underline dotted 2px !important;
}
a[href="/User:Mustard"] {
    font-weight:bold;
    color:#f7ec3b !important;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration: underline dotted 2px !important;
}

/* mediators */
a[href="/User:Codex"],
a[href="/User:Total_Tranny_Death"],
a[href="/User:Math"],
a[href="/User:IronEcho"],
a[href="/User:TotalNiggerDeath"],
a[href="/User:GauntletThrown"],
a[href="/User:H3K"],
a[href="/User:Stratosphere"],
a[href="/User:Soyfield"],
a[href="/User:Perpetualchange"],
a[href="/User:QolaTypeShit"],
a[href="/User:RetardedESLjeet"]
{
    color: #9a52a4 !important;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration: underline dotted 2px !important;
}

/* janny name colors */
a[href="/User:GapeNewell"],
a[href="/User:Tar"],
a[href="/User:Turrican"],
a[href="/User:Gzard"],
a[href="/User:Neptune"],
a[href="/User:%27kiGOD"],
a[href="/User:Glisterald"]
{
    color: #c79430 !important;
    font-weight:bold;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration: underline dotted 2px !important;
}

/* mod name colors */
a[href="/User:Statis"],
a[href="/User:G-Man"],
a[href="/User:Gem"]
{
    font-weight:bold;
    color: #096450 !important;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration: underline dotted 2px !important;
}

/* wiki head admin */
a[href="/User:Cobblestone"] {
	color:#1f1515 !important;
	font-weight:bold !important;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration: underline dotted 2px !important;
}

/* bots */
a[href="/User:Abuse_filter"],
a[href="/User:Bigmegalodon"],
a[href="/User:SoycyclopediaBot"]  {
    color: #578CA9 !important;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration: underline dotted 2px !important;
}

/* Username custom colors. Used as a reward to users who have done something truly extraordinary for the wiki, such as creating the 'ki bot or the image recovery work.
 Reserved only for exceptional contributiors so that it remains something genuinely special to earn and does not become too crazy with name requests. 
 The admin must contact the user about this first*/
a[href="/User:Rickert"] {
    color: #A45A5C !important;
}

.mw-headline, .mw-body #firstHeading {
font-family: "Tahoma", sans-serif;
}

/* Portable Infobox CSS here */
:root {
  --pi-bg-card: #EEF2FF;
  --pi-bg-inner: #D6DAF0;
  --pi-border-outer: #CCCCCC;
  --pi-font-title: "Tahoma", sans-serif;
}

.portable-infobox {
  background-color: var(--pi-bg-card);
  border: 4px double var(--pi-border-outer);
  box-sizing: border-box;
  margin: 0.5em 0 0.5em 1em;
}

.portable-infobox.pi-background,
.portable-infobox .pi-secondary-background,
.portable-infobox .pi-horizontal-group-item.pi-data-label,
.portable-infobox .pi-horizontal-group-item.pi-data-value {
  background-color: var(--pi-bg-card);
}

.portable-infobox .pi-border-color {
  border-color: var(--pi-border-outer);
}

.portable-infobox .pi-title {
  background-color: var(--pi-bg-inner);
  font-size: 125%;
  font-weight: bold;
  font-family: var(--pi-font-title);
  text-align: center;
}

.portable-infobox .pi-header {
  font-weight: bold;
  text-align: center;
}

@media (max-width: 720px) {
    .portable-infobox {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Infobox template style */
.infobox {
	border: 1px solid #a2a9b1;
	border-spacing: 3px;
	background-color: #f8f9fa;
	color: black;
	/* @noflip */
	margin: 0.5em 0 0.5em 1em;
	padding: 0.2em;
	/* @noflip */
	float: right;
	/* @noflip */
	clear: right;
	font-size: 88%;
	line-height: 1.5em;
	width: 22em;
}

.infobox-header,
.infobox-label,
.infobox-above,
.infobox-full-data,
.infobox-data,
.infobox-below,
.infobox-subheader,
.infobox-image,
.infobox-navbar,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox th,
.infobox td {
	vertical-align: top;
}

.infobox-label,
.infobox-data,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox th,
.infobox td {
	/* @noflip */
	text-align: left;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-above,
.infobox .infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox caption {
	font-size: 125%;
	font-weight: bold;
	text-align: center;
}

.infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox caption {
	padding: 0.2em;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
	text-align: center;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-navbar {
	/* @noflip */
	text-align: right;
}

/* AA mode for non-Safari browsers */
.aa {
	font-family: 'MS PGothic', 'submona', sans-serif !important;
	word-wrap: break-word;
	line-height: 1;
	font-size: 12pt;
}

/* AA mode for Safari since Safari will try to set the page to shift-jis */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
	.aa {
		font-family: 'submona', sans-serif !important;
	}
}

/* AA mode with the giko font as default for non-Safari browsers */
.aagiko {
	font-family: 'MS PGothic', 'giko', sans-serif !important;
	word-wrap: break-word;
	line-height: 1;
	font-size: 12pt;
}

/* AA mode with the giko font for Safari since Safari will try to set the page to shift-jis */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
	.aagiko {
		font-family: 'giko', sans-serif !important;
	}
}

#siteSub {display: block; style:"position: relative; top: -.1em; font-size: 90%; color:#706D80; font-weight:bold; font-variant: small-caps;"}

/* Disables indicators for mobile */
@media screen and (max-width: 550px) {
  .mw-indicator {
    display: none;
  }
}

/* Below is stolen from ED's Common.css */

/* Toggle styling */
.hiddentext {
	display: none;
}

.showhidetext {
	color: #0645ad;
	cursor: pointer;
}

.showhidetext,
.collapsibletoggle {
	-khtml-user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.showhidetext:hover {
	text-decoration: underline;
}

.showhidetext:active {
	color: #faa700;
}

/* Fonts */

@font-face {
 font-family: "Deng";
 src: url("images/d/d5/Deng.otf") format("opentype");
}


@font-face {
 font-family: "Ramadhan";
 src: url("images/8/85/Salam.otf") format("opentype");
}

@font-face {
 font-family: "Chomsky";
 src: url("images/1/12/Chomsky.otf") format("opentype");
}

@font-face {
 font-family: "Kanisah";
 src: url("images/8/86/Kanisah.otf") format("opentype");
}

@font-face {
 font-family: "Ghoust Outline";
 src: url("images/0/05/Ghoust_Outline.otf") format("opentype");
}

@font-face {
 font-family: "Troonlibri";
 src: url("images/5/5e/Troonlibri.otf") format("opentype");
}

@font-face {
  font-family: "Submona";
  src: url("/resources/assets/submona.woff") format("woff");
}

@font-face {
  font-family: "Giko";
  src: url("/resources/assets/giko2.woff") format("woff");
}

/* Tag dictionary */

.ns-3008 .firstHeading, body.ns-3008 #siteSub {
    display: none !important;
}
	
body.ns-3008 .mw-wiki-logo, body.ns-3009 .mw-wiki-logo { background-image: url(/images/8/89/Tagdictionarylogofinal.png) !important; background-size:135px;
 }