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: Difference between revisions

From Soyjak Wiki, the free ensoyclopedia
Jump to navigationJump to search
mNo edit summary
mNo edit summary
Line 276: Line 276:
.portable-infobox {
.portable-infobox {
   background-color: #EEF2FF;
   background-color: #EEF2FF;
   border: 4px solid #1E3A8A;
   border: 1px solid #1E3A8A;
   padding: 2px 4px;
   padding: 2px 4px;
   font-family: sans-serif;
   font-family: sans-serif;

Revision as of 12:28, 13 August 2026

/* 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 */
.portable-infobox {
  background-color: #EEF2FF;
  border: 1px solid #1E3A8A;
  padding: 2px 4px;
  font-family: sans-serif;
  font-size: 88%;
  line-height: 1.25em;
  float: right;
  clear: right;
  margin: 0.5em 0 0.5em 1em;
  box-sizing: border-box;
}

.portable-infobox img,
.portable-infobox .pi-image img,
.portable-infobox .pi-media-collection img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

.portable-infobox .pi-image,
.portable-infobox .pi-image-collection,
.portable-infobox .pi-media-collection {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  margin: 2px 0;
}

.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: #EEF2FF;
}

.portable-infobox .pi-title {
  background-color: #D6DAF0;
  font-size: 115%;
  font-weight: bold;
  font-family: inherit;
  text-align: center;
  padding: 2px 4px;
  border-bottom: 1px solid #D6DAF0;
}

.portable-infobox .pi-header {
  background-color: #D6DAF0;
  font-weight: bold;
  text-align: center;
  padding: 1px 4px;
  border-top: 1px solid #D6DAF0;
  border-bottom: 1px solid #D6DAF0;
}

.portable-infobox .pi-data-label {
  font-weight: bold;
  padding: 1px 4px;
}

.portable-infobox .pi-data-value {
  padding: 1px 4px;
}

.portable-infobox .pi-item {
  padding: 1px 0;
}

.portable-infobox .pi-border-color {
  border-color: #D6DAF0;
}

@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;
 }