Jump to content

MediaWiki:Common.css: Difference between revisions

From Factory Town 2 Wiki
← Older editNewer edit →

Admin (talk | contribs)

3 user groups
45 edits
No edit summary
No edit summary
(One intermediate revision by the same user not shown)
Line 1,163: Line 1,163:
   
   
body {
body {
     background-image: url("https://factorytown2.com/images/d/de/Site_background.jpg");
     background-image: url("https://factorytown2.com/wiki/Special:FilePath/Site-background.jpg");
     background-size: cover;
     background-size: cover;
     background-position: top center;
     background-position: top center;
Line 1,171: Line 1,171:
   
   
/* Pushes the visible page content down, revealing the background/logo
/* Pushes the visible page content down, revealing the background/logo
   area above it. Adjust the height (140px here) to taste -- this is
   area above it. Only target the OUTER container -- Vector 2022 uses
   the "recessed" gap you saw on the source site. */
  CSS Grid internally, so applying this to both an inner and outer
#content,
  element causes the margins to stack instead of overlap (this is
   what was causing the extra scroll / misalignment). */
.mw-page-container {
.mw-page-container {
     margin-top: 140px;
     margin-top: 800px;
}
}
   
   
/* Optional: place your logo centered in that new top gap.
/* Hide MediaWiki's default small corner logo -- covers both the
   Requires uploading a logo image the same way as the background,
   modern Vector 2022 class and the older skin ID, in case your
  then swapping the URL below. Remove this block if you'd rather
   theme falls back to either. */
  just use MediaWiki's standard sidebar logo ($wgLogos in
#p-logo,
   LocalSettings.php) and only want the background banner above. */
.mw-logo {
body::before {
     display: none !important;
    content: "";
    display: block;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 100px;
    background-image: url("https://factorytown2.com/images/d/de/Site_background.jpg");
    background-size: contain;
     background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}
}

Revision as of 18:49, 30 July 2026

/* Factory Town 2: Paradise Wiki — site stylesheet */

/* CSS placed here will be applied to all skins */

/******************************************************************************************
********************************* Start user-edit variables *******************************
******************************************************************************************/

/*****************************************
****** START BASIC DESIGN VARIABLES ******
----------------------------------------*/
:root {
	/* font settings */
	--wiki-body-font-family: sans-serif;
	--wiki-content-heading-font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
	--wiki-sidebar-heading-font-family: sans-serif;

	/* border settings for content and sidebar portals */
	--wiki-border-width: 1px;
	--wiki-border-radius: 0px;

	/* layout settings */
	--wiki-is-top-logo: 0; /* 1 = center logo at the top of the page; 0 = logo at the top left of the page */
	--wiki-logo-file-width: 160; /* Width of the image file in px. Put a number without the letters `px`. */
	--wiki-logo-file-height: 160; /* Height of the image file in px. Put a number without the letters `px`. */
	--wiki-is-navigation-inside-content: 0; /* 0 = default navigation tabs layout; 1 = navigation tabs inside content box */
}
/*----------------------------------------
******* END BASIC DESIGN VARIABLES *******
*****************************************/

/*****************************************
****** START BASIC COLOR VARIABLES *******
----------------------------------------*/
:root,
.view-light {
	--wiki-body-background-color: #F6F6F6;
	--wiki-body-background-image: url(filepath://Site-background.jpg);

	--wiki-border-color: #a7d7f9;

	--wiki-content-background-color: #ffffff;
	--wiki-content-background-opacity: 100%;

	--wiki-content-link-color: #0645ad;
	--wiki-icon-to-link-filter: invert(20%) sepia(93%) saturate(2141%) hue-rotate(210deg) brightness(83%) contrast(103%);

	--wiki-accent-color: #3366cc;
	--wiki-accent-label-color: #ffffff;
	--wiki-accent-link-color: #D5FB51;
}

.view-dark {
	--wiki-body-background-color: #171717;
	--wiki-body-background-image: url(filepath://Site-background-dark.jpg);

	--wiki-border-color: #991A51;

	--wiki-content-background-color: #202020;
	--wiki-content-background-opacity: 90%;

	--wiki-content-link-color: #6d8afb;
	--wiki-icon-to-link-filter: invert(60%) sepia(70%) saturate(3715%) hue-rotate(206deg) brightness(101%) contrast(97%);

	--wiki-accent-color: #ff4d9d;
	--wiki-accent-label-color: #000;
	--wiki-accent-link-color: #1e1e43;
}

/*----------------------------------------
******* END BASIC COLOR VARIABLES ********
*****************************************/

/*****************************************
**** START ADVANCED COLOR VARIABLES ******
----------------------------------------*/

:root,
.view-light {
	--wiki-logo-invert: 0;

	--wiki-body-background-position: top center;
	--wiki-body-background-size: cover;
	--wiki-body-background-repeat: no-repeat;
	--wiki-body-background-attachment: fixed;

	--wiki-content-background-color--secondary: color-mix(in srgb, var(--wiki-content-background-color) 96%, var(--wiki-content-dynamic-color));
	--wiki-content-text-color: #111111;
	--wiki-content-link-color--visited: var(--wiki-content-link-color);
	--wiki-content-link-color--hover: var(--wiki-content-link-color);
	--wiki-content-redlink-color: #ba0000;

	--wiki-content-heading-color: var(--wiki-content-text-color);
	--wiki-content-heading-border-color: var(--wiki-content-body-border-color);

	--wiki-content-body-border-color: var(--wiki-content-border-color);

	--wiki-navigation-background-color: var(--wiki-content-background-color--secondary);
	--wiki-navigation-border-color: var(--wiki-navigation-selected-border-color);
	--wiki-navigation-text-color: var(--wiki-content-link-color);
	--wiki-navigation-selected-background-color: var(--wiki-content-background-color);
	--wiki-navigation-selected-border-color: var(--wiki-content-border-color);
	--wiki-navigation-selected-text-color: var(--wiki-content-text-color);

	--wiki-table-background-color: var(--wiki-content-background-color);
	--wiki-table-header-background-color: var(--wiki-content-background-color--secondary);
	--wiki-table-text-color: var(--wiki-content-text-color);
	--wiki-table-link-color: var(--wiki-content-link-color);
	--wiki-table-redlink-color: var(--wiki-content-redlink-color);
	--wiki-table-header-text-color: var(--wiki-table-text-color);
	--wiki-table-header-link-color: var(--wiki-content-link-color);
	--wiki-table-border-color: var(--wiki-content-border-color);

	--wiki-neutral-color: var(--wiki-content-text-mix-color);
	--wiki-alert-color: #bf0017;
	--wiki-warning-color: #b05f30;
	--wiki-success-color: #0c742f;

	--wiki-body-dynamic-color: #000000;
	--wiki-body-dynamic-color--inverted: #ffffff;
	--wiki-body-dynamic-color--secondary: #333333;
	--wiki-body-dynamic-color--secondary--inverted: #cccccc;

	--wiki-content-border-color--secondary: color-mix(in srgb, var(--wiki-content-border-color) 50%, transparent);
	--wiki-content-border-color--accent: color-mix(in srgb, var(--wiki-accent-color) 50%, transparent);
	--wiki-content-link-label-color: #ffffff;
	--wiki-content-dynamic-color: #000000;
	--wiki-content-dynamic-color--inverted: #ffffff;
	--wiki-content-dynamic-color--secondary: #333333;
	--wiki-content-dynamic-color--secondary--inverted: #cccccc;

	--wiki-alert-label-color: #ffffff;
	--wiki-warning-label-color: #ffffff;
	--wiki-success-label-color: #ffffff;

	--wiki-icon-general-filter: ;
}

.view-dark {
	--wiki-logo-invert: 0;

	--wiki-body-background-position: top center;
	--wiki-body-background-size: cover;
	--wiki-body-background-repeat: no-repeat;
	--wiki-body-background-attachment: fixed;

	--wiki-content-background-color--secondary: color-mix(in srgb, var(--wiki-content-background-color) 96%, var(--wiki-content-dynamic-color));
	--wiki-content-text-color: #ededed;
	--wiki-content-link-color--visited: var(--wiki-content-link-color);
	--wiki-content-link-color--hover: var(--wiki-content-link-color);
	--wiki-content-redlink-color: #FC5B4F;

	--wiki-content-heading-color: var(--wiki-content-text-color);
	--wiki-content-heading-border-color: var(--wiki-content-body-border-color);

	--wiki-content-body-border-color: var(--wiki-content-border-color);

	--wiki-navigation-background-color: var(--wiki-content-background-color--secondary);
	--wiki-navigation-border-color: var(--wiki-navigation-selected-border-color);
	--wiki-navigation-text-color: var(--wiki-content-link-color);
	--wiki-navigation-selected-background-color: var(--wiki-content-background-color);
	--wiki-navigation-selected-border-color: var(--wiki-content-border-color);
	--wiki-navigation-selected-text-color: var(--wiki-content-text-color);

	--wiki-table-background-color: var(--wiki-content-background-color);
	--wiki-table-header-background-color: var(--wiki-content-background-color--secondary);
	--wiki-table-text-color: var(--wiki-content-text-color);
	--wiki-table-link-color: var(--wiki-content-link-color);
	--wiki-table-redlink-color: var(--wiki-content-redlink-color);
	--wiki-table-header-text-color: var(--wiki-table-text-color);
	--wiki-table-header-link-color: var(--wiki-content-link-color);
	--wiki-table-border-color: var(--wiki-content-border-color);

	--wiki-neutral-color: var(--wiki-content-text-mix-color);
	--wiki-alert-color: #ff576a;
	--wiki-warning-color: #cf721c;
	--wiki-success-color: #13aa45;

	--wiki-body-dynamic-color: #ffffff;
	--wiki-body-dynamic-color--inverted: #000000;
	--wiki-body-dynamic-color--secondary: #cccccc;
	--wiki-body-dynamic-color--secondary--inverted: #333333;

	--wiki-content-border-color--secondary: color-mix(in srgb, var(--wiki-content-border-color) 50%, transparent);
	--wiki-content-border-color--accent: color-mix(in srgb, var(--wiki-accent-color) 50%, transparent);
	--wiki-content-link-label-color: #000;
	--wiki-content-dynamic-color: #ffffff;
	--wiki-content-dynamic-color--inverted: #000000;
	--wiki-content-dynamic-color--secondary: #cccccc;
	--wiki-content-dynamic-color--secondary--inverted: #333333;

	--wiki-alert-label-color: #000000;
	--wiki-warning-label-color: #000000;
	--wiki-success-label-color: #000000;

	--wiki-icon-general-filter: invert(100%);
}

/*----------------------------------------
***** END ADVANCED COLOR VARIABLES *******
*****************************************/

/*****************************************
**** START ADVANCED DESIGN VARIABLES *****
----------------------------------------*/

:root {
	--wiki-logo-height: calc(var(--wiki-logo-file-height)*1px);
	--wiki-logo-margin: 15px;

	--wiki-content-firstheading-font-family: var(--wiki-content-heading-font-family);

	--wiki-page-content-max-width: 9999px;
	--wiki-gap-between-sidebar-and-content: 1em;

	--wiki-sidebar-offset: 0px;
	--wiki-sidebar-width: 10em;
	--wiki-sidebar-portal-spacing: 0px;

	--wiki-spacing-before-footer: 0px;

	--wiki-top-spacing: calc(var(--wiki-is-top-logo)*var(--wiki-logo-margin) + (1 - var(--wiki-is-top-logo))*1em);
	--wiki-left-spacing: 1em;
	--wiki-right-spacing: 1em;
	--wiki-bottom-spacing: 2em;

	--wiki-content-top-spacing:1.25em;
	--wiki-content-left-spacing:1.5em;
	--wiki-content-right-spacing:1.5em;
	--wiki-content-bottom-spacing:1.5em;
}

/*----------------------------------------
***** END ADVANCED DESIGN VARIABLES ******
*****************************************/


/*******************************
**** START SHARED VARIABLES ****
**** tl;dr: don't edit this ****
********************************/
:root {
	--wiki-accent-color--hover: color-mix(in srgb, var(--wiki-accent-color) 90%, var(--wiki-accent-label-color));

	--wiki-logo-offset-x: 0px;
	--wiki-logo-offset-y: 0px;
	--wiki-logo-filter: invert(var(--wiki-logo-invert, 0)) hue-rotate(calc(var(--wiki-logo-invert, 0)*180deg));

	--wiki-border-style: solid;
	--wiki-border-image: none;
	--wiki-backdrop-filter: none;

	--wiki-content-border-width: var(--wiki-border-width);
	--wiki-content-border-color: var(--wiki-border-color);
	--wiki-content-border-style: var(--wiki-border-style);
	--wiki-content-border-radius: var(--wiki-border-radius);
	--wiki-content-border-image: var(--wiki-border-image);
	--wiki-content-backdrop-filter: var(--wiki-backdrop-filter);
	--wiki-content-border-top-radius: var(--wiki-content-border-radius);
	--wiki-content-border-bottom-width: calc(min(var(--wiki-content-border-width), 1px));
	--wiki-content-border-bottom-style: var(--wiki-content-border-style);
	--wiki-content-border-bottom-color: var(--wiki-content-border-color);
	--wiki-content-text-mix-color: color-mix(in srgb, var(--wiki-content-background-color), var(--wiki-content-text-color) 62%);
	--wiki-content-text-mix-color-95: color-mix(in srgb, var(--wiki-content-background-color) 95%, var(--wiki-content-text-color));
	--wiki-content-text-color--hover: var(--wiki-content-text-color);

	--wiki-sidebar-border-width: var(--wiki-border-width);
	--wiki-sidebar-border-color: var(--wiki-border-color);
	--wiki-sidebar-border-style: var(--wiki-border-style);
	--wiki-sidebar-border-radius: var(--wiki-border-radius);
	--wiki-sidebar-border-image: var(--wiki-border-image);
	--wiki-sidebar-background-color: var(--wiki-content-background-color);
	--wiki-sidebar-background-opacity: var(--wiki-content-background-opacity);
	--wiki-sidebar-background-image: none;
	--wiki-sidebar-background-position: center;
	--wiki-sidebar-background-repeat: repeat;
	--wiki-sidebar-background-size: auto;
	--wiki-sidebar-backdrop-filter: var(--wiki-backdrop-filter);
	--wiki-sidebar-box-shadow: none;
	--wiki-sidebar-filter: none;
	--wiki-sidebar-font-size: 0.75em;
	--wiki-sidebar-line-height: 1.125;
	--wiki-sidebar-heading-font-size: 0.75em;
	--wiki-sidebar-margin: 0em;
	--wiki-sidebar-padding: 0px;
	--wiki-sidebar-link-color: var(--wiki-content-link-color);
	--wiki-sidebar-icon-to-link-filter: var(--wiki-icon-to-link-filter);
	--wiki-sidebar-link-color--hover: var(--wiki-content-link-color--hover);
	--wiki-sidebar-heading-color: var(--wiki-content-heading-color);
	--wiki-sidebar-heading-font-weight: normal;
	--wiki-sidebar-heading-font-style: normal;
	--wiki-sidebar-heading-text-transform: none;
	--wiki-sidebar-heading-line-height: normal;
	--wiki-sidebar-heading-padding: 0.5rem 0.25rem 0.5rem 0.5rem;
	--wiki-sidebar-heading-margin: 0px 0px -0.5rem 0px;
	--wiki-sidebar-heading-background: none;
	--wiki-sidebar-heading-border-image: none;
	--wiki-sidebar-heading-text-shadow: none;
	--wiki-sidebar-list-margin: 0px;
	--wiki-sidebar-list-padding: 0.25rem;
	--wiki-sidebar-list-border-image: none;
	--wiki-sidebar-list-background: none;
	--wiki-sidebar-list-item-padding: 0.25em 0.25rem;
	--wiki-sidebar-list-item-spacing: 0px;
	--wiki-sidebar-list-item-border-image: none;
	--wiki-sidebar-list-item-border-image--hover: none;
	--wiki-sidebar-list-item-background: none;
	--wiki-sidebar-list-item-background--hover: none;
	--wiki-sidebar-box-padding: 0px;
	--wiki-sidebar-box-border: 0px;
	--wiki-sidebar-box-border-radius: var(--wiki-sidebar-border-radius);
	--wiki-sidebar-box-border-image: none;
	--wiki-sidebar-box-background: none;

	--wiki-footer-border-width: var(--wiki-content-border-width);
	--wiki-footer-border-color: var(--wiki-content-border-color);
	--wiki-footer-border-style: var(--wiki-content-border-style);
	--wiki-footer-border-radius: var(--wiki-content-border-radius);
	--wiki-footer-border-image: none;
	--wiki-footer-background-color: var(--wiki-content-background-color);
	--wiki-footer-background-opacity: var(--wiki-content-background-opacity);
	--wiki-footer-backdrop-filter: var(--wiki-content-backdrop-filter);
	--wiki-footer-text-color: var(--wiki-content-text-color);
	--wiki-footer-link-color: var(--wiki-content-link-color);
	--wiki-footer-link-color--hover: var(--wiki-content-link-color--hover);

	--wiki-navigation-height: 2.75rem;
	--wiki-navigation-left-spacing: calc( (1 - var(--wiki-is-navigation-inside-content))*var(--wiki-content-border-radius) + var(--wiki-is-navigation-inside-content) * 0.5rem );
	--wiki-navigation-right-spacing: calc( var(--wiki-is-navigation-inside-content) * 0.5rem );
	--wiki-navigation-selected-backdrop-filter: var(--wiki-content-backdrop-filter);
	--wiki-navigation-backdrop-filter: var(--wiki-navigation-selected-backdrop-filter);
	--wiki-navigation-box-border-image: none;
	--wiki-navigation-box-background-color: var(--wiki-content-background-color);
	--wiki-navigation-box-background-opacity: calc(var(--wiki-content-background-opacity)*0.8*var(--wiki-is-navigation-inside-content));
	--wiki-navigation-box-background: color-mix(in srgb, var(--wiki-navigation-box-background-color) var(--wiki-navigation-box-background-opacity), transparent);
	--wiki-navigation-box-backdrop-filter: none;
	--wiki-navigation-font-size: 0.8125em;
	--wiki-navigation-font-weight: normal;
	--wiki-navigation-selected-font-weight: var(--wiki-navigation-font-weight);
	--wiki-navigation-tab-spacing: 0.25em;
	--wiki-navigation-tab-padding-top: 0.5em;
	--wiki-navigation-tab-padding-bottom: 0.5em;
	--wiki-navigation-tab-padding-x: 0.75em;
	--wiki-navigation-icon-size: 1em;
	--wiki-navigation-tab-padding-x--icon: var(--wiki-navigation-tab-padding-x);
	--wiki-navigation-border-width: var(--wiki-navigation-selected-border-width);
	--wiki-navigation-border-style: solid;
	--wiki-navigation-border-radius: calc(var(--wiki-content-border-radius) - var(--wiki-is-navigation-inside-content)*2px);
	--wiki-navigation-border-image: none;
	--wiki-navigation-selected-border-width: calc( (1 - var(--wiki-is-navigation-inside-content))*var(--wiki-content-border-width) + var(--wiki-is-navigation-inside-content) * 1px );
	--wiki-navigation-selected-border-style: solid;
	--wiki-navigation-selected-border-bottom-background: none;
	--wiki-navigation-selected-border-image: var(--wiki-navigation-border-image);
	--wiki-navigation-border-color--hover: var(--wiki-navigation-border-color);
	--wiki-navigation-border-image--hover: var(--wiki-navigation-border-image);
	--wiki-navigation-border-bottom-color: var(--wiki-navigation-selected-border-color);
	--wiki-navigation-border-bottom-color--hover: var(--wiki-navigation-border-color--hover);
	--wiki-navigation-border-bottom-width: calc(var(--wiki-is-navigation-inside-content, 0) * var(--wiki-navigation-selected-border-width, 1px) + (1 - var(--wiki-is-navigation-inside-content, 0)) * var(--wiki-content-border-width, 1px));
	--wiki-navigation-border-bottom-style: var(--wiki-navigation-selected-border-style);
	--wiki-navigation-background-opacity: var(--wiki-navigation-selected-background-opacity);
	--wiki-navigation-background-image: none;
	--wiki-navigation-background-repeat: no-repeat, no-repeat, repeat-x;
	--wiki-navigation-background-position: left bottom, right bottom, left bottom;
	--wiki-navigation-background-size:  1px 100%, 1px 100%, 100%;
	--wiki-navigation-selected-background-opacity: var(--wiki-content-background-opacity);
	--wiki-navigation-selected-background-image: none;
	--wiki-navigation-selected-background-repeat: no-repeat, no-repeat;
	--wiki-navigation-selected-background-position: left bottom, right bottom;
	--wiki-navigation-selected-background-size:  1px 100%, 1px 100%;
	--wiki-navigation-background-color--hover: var(--wiki-navigation-background-color);
	--wiki-navigation-background-opacity--hover: var(--wiki-navigation-background-opacity);
	--wiki-navigation-background-image--hover: var(--wiki-navigation-background-image);
	--wiki-navigation-background-position--hover: var(--wiki-navigation-background-position);
	--wiki-navigation-background-repeat--hover: var(--wiki-navigation-background-repeat);
	--wiki-navigation-background-size--hover: var(--wiki-navigation-background-size);
	--wiki-navigation-text-transform: none;
	--wiki-navigation-text-color--hover: var(--wiki-content-link-color--hover);
	--wiki-navigation-text-shadow: none;
	--wiki-navigation-selected-text-shadow: var(--wiki-navigation-text-shadow);
	--wiki-navigation-text-shadow--hover: var(--wiki-navigation-text-shadow);
	--wiki-navigation-filter: none;
	--wiki-navigation-selected-filter: var(--wiki-navigation-filter);
	--wiki-navigation-transform--hover: none;
	--wiki-navigation-bottom-spacing: 0px;
	--wiki-navigation-dropdown-offset: 0px;
	--wiki-navigation-dropdown-text-color: var(--wiki-navigation-text-color);
	--wiki-navigation-dropdown-text-color--hover: var(--wiki-navigation-dropdown-text-color);
	--wiki-navigation-dropdown-font-size: var(--wiki-navigation-font-size);
	--wiki-navigation-dropdown-border-color: var(--wiki-navigation-border-color);
	--wiki-navigation-dropdown-border-width: 1px;
	--wiki-navigation-dropdown-border-radius: var(--wiki-navigation-border-radius);
	--wiki-navigation-dropdown-border-image: none;
	--wiki-navigation-dropdown-padding: 0.25em;
	--wiki-navigation-dropdown-item-padding: 0.625em;
	--wiki-navigation-dropdown-item-background--hover: none;
	--wiki-navigation-dropdown-background-color: var(--wiki-content-background-color);
	--wiki-navigation-dropdown-background-opacity: var(--wiki-content-background-opacity);
	--wiki-navigation-dropdown-backdrop-filter: none;
	--wiki-navigation-dropdown-box-shadow: none;
	--wiki-navigation-search-height: 2em;
	--wiki-navigation-search-bottom-spacing: 3px;
	--wiki-navigation-search-background-color: var(--wiki-content-background-color--secondary);
	--wiki-navigation-search-background-image: none;
	--wiki-navigation-search-background-position: 0;
	--wiki-navigation-search-background-size: auto;
	--wiki-navigation-search-background-repeat: repeat;
	--wiki-navigation-search-backdrop-filter: none;
	--wiki-navigation-search-border-color: var(--wiki-navigation-border-color);
	--wiki-navigation-search-border-color--hover: var(--wiki-accent-color);
	--wiki-navigation-search-border-width: 1px;
	--wiki-navigation-search-border-style: solid;
	--wiki-navigation-search-border-radius: 2px;
	--wiki-navigation-search-border-image: none;
	--wiki-navigation-search-border-image--hover: var(--wiki-navigation-search-border-image);
	--wiki-navigation-search-box-shadow: none;
	--wiki-navigation-search-box-shadow--hover: var(--wiki-navigation-search-box-shadow);
	--wiki-navigation-search-text-color: var(--wiki-content-text-color);
	--wiki-navigation-search-font-size: var(--wiki-navigation-font-size);
	--wiki-navigation-search-button-color: currentColor;
	--wiki-navigation-search-button-color--hover: var(--wiki-navigation-search-button-color);
	--wiki-navigation-search-button-color-opacity: 80%;
	--wiki-navigation-search-button-color-opacity--hover: 95%;
	--wiki-navigation-search-highlight-background-color: color-mix(in srgb, var(--wiki-accent-color) 5%, transparent);
	--wiki-navigation-gap-between-left-and-right: calc(max(0px, var(--wiki-navigation-tab-spacing)));

	--wiki-content-heading-border-bottom-width: 1px;
	--wiki-content-heading-border-style: solid;
	--wiki-content-heading-font-weight: normal;
	--wiki-content-heading-font-style: normal;
	--wiki-content-heading-line-height: normal;
	--wiki-content-heading-text-transform: none;
	--wiki-content-heading-text-shadow: none;
	--wiki-content-firstheading-font-size: 1.8em;
	--wiki-content-heading-h2-font-size: 1.5em;
	--wiki-content-heading-h3-font-size: 1.2em;
	--wiki-content-heading-h4-font-size: 114%;
	--wiki-content-heading-h5-font-size: 108%;
	--wiki-content-heading-h6-font-size: 100%;
	--wiki-content-firstheading-border-bottom-width: var(--wiki-content-heading-border-bottom-width);
	--wiki-content-firstheading-border-color: var(--wiki-content-heading-border-color);
	--wiki-content-firstheading-border-style: var(--wiki-content-heading-border-style);
	--wiki-content-firstheading-color: var(--wiki-content-heading-color);
	--wiki-content-firstheading-font-weight: var(--wiki-content-heading-font-weight);
	--wiki-content-firstheading-font-style: var(--wiki-content-heading-font-style);
	--wiki-content-firstheading-line-height: var(--wiki-content-heading-line-height);
	--wiki-content-firstheading-text-transform: var(--wiki-content-heading-text-transform);
	--wiki-content-firstheading-text-shadow: none;
	--wiki-content-subheading-border-bottom-width: 0px;
	--wiki-content-subheading-border-color: var(--wiki-content-heading-border-color);
	--wiki-content-subheading-border-style: var(--wiki-content-heading-border-style);
	--wiki-content-subheading-color: var(--wiki-content-heading-color);
	--wiki-content-subheading-font-family: var(--wiki-body-font-family);
	--wiki-content-subheading-font-weight: bold;
	--wiki-content-subheading-font-style: normal;
	--wiki-content-subheading-line-height: var(--wiki-content-heading-line-height);
	--wiki-content-subheading-text-transform: none;
	--wiki-content-subheading-text-shadow: none;

	--wiki-content-toc-border-width: 1px;
	--wiki-content-toc-border-color: var(--wiki-content-body-border-color);
	--wiki-content-toc-border-style: solid;
	--wiki-content-toc-border-radius: 0px;
	--wiki-content-toc-border-image: none;
	--wiki-content-toc-background: var(--wiki-content-background-color--secondary);
	--wiki-content-toc-box-shadow: none;
	--wiki-content-toc-heading-font-family: var(--wiki-body-font-family);

	--wiki-content-catlinks-border-width: 1px;
	--wiki-content-catlinks-border-color: var(--wiki-content-body-border-color);
	--wiki-content-catlinks-border-style: solid;
	--wiki-content-catlinks-border-radius: 0px;
	--wiki-content-catlinks-border-image: none;
	--wiki-content-catlinks-background: var(--wiki-content-background-color--secondary);
	--wiki-content-catlinks-box-shadow: none;

	--wiki-content-filetoc-border-width: 1px;
	--wiki-content-filetoc-border-color: var(--wiki-content-body-border-color);
	--wiki-content-filetoc-border-style: solid;
	--wiki-content-filetoc-border-radius: 0px;
	--wiki-content-filetoc-border-image: none;
	--wiki-content-filetoc-background: var(--wiki-content-background-color--secondary);
	--wiki-content-filetoc-box-shadow: none;
}

@media screen and (max-width: 720px) {
	:root:root,
	:root.view-light  {
		--wiki-page-content-max-width: 9999px;
		--wiki-logo-offset-x: 0px;
		--wiki-logo-offset-y: 0px;
	}
	:root.view-dark{
		/* for dark themes */
	}

	body.has-vector-mobile-menu{
		--wiki-sidebar-offset: 0px;
		--wiki-sidebar-margin: 0px;
		--wiki-sidebar-heading-background: none;
		--wiki-sidebar-heading-border-image: none;
		--wiki-sidebar-heading-margin: 0px 0px -0.5em 0px;
		--wiki-sidebar-list-margin: 0px;
		--wiki-sidebar-list-background: none;
		--wiki-sidebar-list-border-image: none;
		--wiki-sidebar-list-item-background: none;
		--wiki-sidebar-list-item-border-image: none;
		--wiki-sidebar-list-item-background--hover: none;
		--wiki-sidebar-list-item-border-image--hover: none;
		--wiki-sidebar-list-item-spacing: 0px;
		--wiki-sidebar-line-height: 1.125;
		--wiki-sidebar-background-opacity: 100%;
		--wiki-navigation-search-border-width: 1px;
	}
}

/*****************************
**** END SHARED VARIABLES ****
******************************/

/******************************
* Fallback for older browsers *
* DONT EDIT THIS              *
*******************************/
@supports not (color:color-mix(in srgb, #000, transparent)) {
	.view-dark,
	.view-light,
	:root {
		--wiki-content-text-mix-color: var(--wiki-content-text-color);
		--wiki-content-text-mix-color-95: var(--wiki-content-background-color);
		--wiki-content-background-color--secondary: var(--wiki-content-dynamic-color--secondary--inverted);
		--wiki-content-border-color--secondary: var(--wiki-content-border-color);
		--wiki-content-border-color--accent: var(--wiki-accent-color);
		--wiki-accent-color--hover: var(--wiki-accent-color);
		--wiki-navigation-search-highlight-background-color: transparent;
	}
}

/*****************************
*     PortableInfoboxes      *
******************************/
:root {
	--pi-background: var(--wiki-content-background-color);
	--pi-secondary-background: var(--wiki-accent-color);
	--pi-secondary-background-label: var(--wiki-accent-label-color);
	--pi-border-color: color-mix(in srgb, var(--pi-secondary-background) 50%, transparent);
}

.portable-infobox .pi-title,
.portable-infobox .pi-header {
	text-align: center;
	font-size: 1.5em;
	background: color-mix(in srgb, var(--pi-secondary-background) 75%, transparent);
	color: var(--pi-secondary-background-label);
}

.portable-infobox .pi-data,
.portable-infobox .pi-group {
	background: var(--wiki-content-background-color--secondary);
}

.portable-infobox .pi-image {
	padding: 8px;
}

.pi-image-thumbnail {
	max-width: 100%;
}

.pi-caption {
	color: var(--wiki-content-text-mix-color);
}

.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
	background: var(--pi-secondary-background);
	color: var(--pi-secondary-background-label);
}

.pi-collapse > .pi-item:first-child {
	cursor: pointer;
}

.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
	border-bottom: 0;
	font-family: inherit;
	font-weight: 700;
	margin: 0;
}

/***********************
* MP link *
************************/
.mp-links {
	--gap: 10px;
	--mp-link-nested-indent: 1.5em;
}

.mp-links ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	margin: 2px;
	gap: var(--gap);
}

.mp-links ul > li {
	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
	text-align: center;
	box-sizing: border-box;
	flex: max(calc(50% - var(--gap)), 5em) 1 1;
	outline: 1px solid var(--wiki-content-link-color);
	transition: 0.1s ease-in;
}

.mp-links.columns-1 ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
.mp-links.columns-2 ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;}
.mp-links.columns-3 ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;}
.mp-links.columns-4 ul > li {flex: max(calc(25% - var(--gap)), 5em) 1 1;}
.mp-links.columns-5 ul > li {flex: max(calc(20% - var(--gap)), 5em) 1 1;}
.mp-links.columns-6 ul > li {flex: max(calc((100% / 6) - var(--gap)), 5em) 1 1;}
.mp-links.columns-7 ul > li {flex: max(calc((100% / 7) - var(--gap)), 5em) 1 1;}
.mp-links.columns-8 ul > li {flex: max(calc((100% / 8) - var(--gap)), 5em) 1 1;}
.mp-links.columns-max ul > li {flex: max(calc(0% - var(--gap)), 5em) 1 1;}

.mp-links ul > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	box-sizing: border-box;
	padding: 5px;
}

.mp-links ul > li:has(> a:hover) > a {
	background-color: color-mix(in srgb, var(--wiki-content-link-color) 20%, transparent);
	text-decoration: underline;
}

.mp-links ul > li > ul {
	margin:var(--gap);
	flex:0 0 100%;
	max-width:calc(100% - (var(--gap) * 2));
	padding: calc(var(--gap) * 2) 0;
	padding-left:var(--mp-link-nested-indent);
	box-sizing:border-box;
}

.mp-links ul > li > ul > li {
	margin-right:calc(var(--gap) * 2);
}

.mp-links:not(.plain) ul > li > ul {
	background-color:var(--background-color-interactive);
}

.mp-links.stretch,
.mp-links.stretch ul {
	height: 100%;
}

.mp-links.plain ul > li {
	outline-width: 0px;
}

.mp-links.side-image li {
	flex-flow: row wrap;
}

.mp-links.side-image.left li a {
	justify-content: flex-start;
}

.mp-links.side-image.left li a:first-child:not(:only-child) {
	flex:0 0 auto;
}

.mp-links.side-image.right li {
	flex-direction:row-reverse
}

.mp-links.side-image.right li a {
	justify-content: flex-end;
}

.mp-links.side-image.right li a:first-child:not(:only-child) {
	flex:0 0 auto;
}

.mp-links.side-image.center li a {
	flex-basis:50%;
}

.mp-links.side-image.center li a:first-child {
	justify-content:flex-end;
}

.mp-links.side-image.center li a:first-child img {
	margin:initial;
}

.mp-links.side-image.center li a:last-child {
	justify-content: flex-start;
}

.mp-links.side-image.center li a:only-child {
	justify-content:center;
}

/*********************************************************************************************************************
* Semantically-correct horizontal lists (for Module:Navbox)
**********************************************************************************************************************/
.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}

.hlist dd,
.hlist dt,
.hlist li {
	margin: 0;
	display: inline;
}

.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
	display: inline;
}

.hlist .mw-empty-li {
	display: none;
}

.hlist dt:not(:last-child)::after {
	content: ":\20";
}

.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
	content: "\20\A0\2022\A0\20";
	font-weight: inherit;
}

.hlist dd ol::before,
.hlist dd ul::before,
.hlist dd dl::before,
.hlist dt ol::before,
.hlist dt ul::before,
.hlist dt dl::before,
.hlist li ol::before,
.hlist li ul::before,
.hlist li dl::before {
	content: "\20(";
	font-weight: inherit;
}

.hlist dd ol::after,
.hlist dd ul::after,
.hlist dd dl::after,
.hlist dt ol::after,
.hlist dt ul::after,
.hlist dt dl::after,
.hlist li ol::after,
.hlist li ul::after,
.hlist li dl::after {
	content: ")";
	font-weight: inherit;
}

.hlist ol {
	counter-reset: listitem;
}

.hlist ol > li {
	counter-increment: listitem;
}

.hlist ol > li::before {
	content: " " counter(listitem) ".\20";
}

.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))) {
	display: inline-block;
}

/*** Miscellaneous ***/
.responsive-image {
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}

.view-dark .invert-on-dark,
.view-light .invert-on-light {
	filter: invert(100%);
}

.pixelated {
	image-rendering: pixelated;
}

@media screen and (min-width: 720px) {
	.mobileonly {
		display: none;
	}
}

@media screen and (max-width: 720px) {
	.nomobile {
		display: none;
	}
}

/*** Utility classes for standard MW galleries ***/
.gallery.gallery.gallery.spaced {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	margin-left: unset;
}

.gallery.centered {
	text-align: center;
}

* Ambox */
.ambox {
	--ambox-color: var(--wiki-accent-color);

	border: 1px solid var(--wiki-content-border-color);
	border-left: 10px solid var(--ambox-color);
	border-radius: 2px;
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 1em 0;
	padding: 3px .6em;
	background-color: var(--wiki-content-background-color--secondary);
	box-shadow: 2px 2px 5px 0px #0002;
}

@media (min-width: 720px) {
	.ambox {
		margin-inline: 10%;
	}
}

.ambox.tiny {
	padding: .04rem .5em;
	margin-inline: 0;
	width: fit-content;
}

.ambox + .ambox {
	margin-top: -.6em;
}

.ambox-content {
	flex: 1;
}

.ambox-content p {
	margin: .15em 0;
}

.ambox-title {
	font-weight: bold;
}

* Hatnote */
.hatnote {
	padding: 1px 0 1px 1.6em;
	margin-bottom: 0.5em;
	font-style: italic;
	border-top: 1px solid var(--wiki-content-border-color--secondary);
	border-bottom: 1px solid var(--wiki-content-border-color--secondary);
}

.hatnote.icon {
	padding-left: 0;
}

* Spoiler */
.spoiler-content {
	background-color: color-mix(in srgb, var(--wiki-content-dynamic-color) 50%, transparent);
	transition: all 0.3s;
	cursor: pointer;
	overflow: auto;
}

@supports not (color:color-mix(in srgb, #000, transparent)) {
	.spoiler-content {
		background-color: var(--wiki-content-dynamic-color--secondary);
	}
}

.spoiler-content > * {
	pointer-events: none;
	opacity: 0;
	transition: all 0.3s;
}

.spoiler-content.show {
	background-color: transparent;
}

.spoiler-content.show > * {
	pointer-events: unset;
	opacity: 1;
}

* Link icon */
.link-icon {
	--link-icon-line-height: 1.5em;
	--link-icon-size: 1.5em;
	display: inline-flex;
	align-items: center;
	height: var(--link-icon-line-height);
	vertical-align: bottom;
}

.link-icon .regular {
	align-self: center;
}

.link-icon .regular a {
	display: flex;
}

.link-icon .regular img {
	height: var(--link-icon-size);
	max-width: var(--link-icon-size);
}

.link-icon .fallback {
	outline: 1px solid var(--wiki-content-text-color);
	border-radius: 50%;
	text-align: center;
	width: var(--link-icon-size);
	line-height: var(--link-icon-size);
}

.link-icon.notext,
.link-icon.notext .fallback {
	display: inline-block;
}

* Quote */
.quote {
	background: var(--wiki-content-background-color--secondary);
	border-radius: 5px;
	border: 2px solid var(--wiki-content-border-color);
	margin: .5em 0;
	padding: .5em;
	overflow-y: hidden;
}

.quote .block {
	display: block;
}

.quote .title {
	font-size: large;
	font-weight: bold;
}

.quote .author {
	font-weight: bold;
	text-align: end;
}

.quote .marks-wrapper {
	display: flex;
	gap: 5px;
}

.quote .marks-wrapper::before,
.quote .marks-wrapper::after {
	font-size: 100px;
	line-height: 0px;
}

.quote .marks-wrapper::before {
	content: "\201C";
	margin-top: 40px;
}

.quote .marks-wrapper::after {
	content: "\201D";
	align-self: end;
	margin-bottom: -10px;
}

.client-js .mw-charinsert-item {
	display: none;
}

/*****************************
* Color *
******************************/
.color__splotch {
	display: inline-block;
	height: 1em;
	width: 1em;
	box-sizing: border-box;
	vertical-align: text-top;
	border-radius: 50%;
	border: 1px solid var(--wiki-content-text-color);
}

/*********************************
* TOC limit *
**********************************/
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
	display: none;
}

/*********************************
* TOC right *
**********************************/
@media all and (min-width: 720px) {
	.tocright {
		float: right;
		clear: right;
		margin: 0 0 0.5em 1em;
	}
}

/*********************************
* key *
**********************************/
kbd.key{
	filter: drop-shadow(0 0 1px #808080);
}

/*********************************
* Nowrap *
**********************************/
.nowrap{
    white-space: nowrap;
}


/* --- Factory Town 2: Paradise Wiki site theming --- */

:root {
    --ft2-accent: #2e7d32;
    --ft2-accent-dark: #1b5e20;
    --ft2-card-bg: #ffffff;
    --ft2-card-border: #dcdcdc;
    --ft2-card-shadow: rgba(0, 0, 0, 0.08);
    --ft2-text: #202122;
}

/* "Game Navigation" icon grid on the Main Page (MediaWiki <gallery> tag) */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 20px 0;
    border: none !important;
}

.gallery .gallerybox {
    width: 130px !important;
    text-align: center;
    background: var(--ft2-card-bg);
    border: 1px solid var(--ft2-card-border);
    border-radius: 10px;
    padding: 12px 8px;
    box-shadow: 0 1px 3px var(--ft2-card-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.gallery .gallerybox:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px var(--ft2-card-shadow);
    border-color: var(--ft2-accent);
}

.gallery .gallerybox .thumb {
    background: transparent !important;
    border: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 64px;
}

.gallery .gallerybox img {
    max-width: 56px;
    max-height: 56px;
    object-fit: contain;
}

.gallery .gallerytext {
    font-weight: 600;
    font-size: 0.95em;
    margin-top: 8px;
    color: var(--ft2-text);
}

.gallery .gallerytext a {
    color: var(--ft2-text);
    text-decoration: none;
}

.gallery .gallerybox:hover .gallerytext a {
    color: var(--ft2-accent-dark);
}

/* Sidebar section headings */
.vector-menu-heading,
.mw-portlet-head {
    color: var(--ft2-accent-dark) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.03em;
}

/* General link color */
a {
    color: var(--ft2-accent-dark);
}

a:visited {
    color: var(--ft2-accent);
}

/* Main page welcome box */
.ft2-welcome {
    background: #f6f8f6;
    border: 1px solid var(--ft2-card-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

/* --- Page background + top banner spacing --- */
 
body {
    background-image: url("https://factorytown2.com/wiki/Special:FilePath/Site-background.jpg");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
 
/* Pushes the visible page content down, revealing the background/logo
   area above it. Only target the OUTER container -- Vector 2022 uses
   CSS Grid internally, so applying this to both an inner and outer
   element causes the margins to stack instead of overlap (this is
   what was causing the extra scroll / misalignment). */
.mw-page-container {
    margin-top: 800px;
}
 
/* Hide MediaWiki's default small corner logo -- covers both the
   modern Vector 2022 class and the older skin ID, in case your
   theme falls back to either. */
#p-logo,
.mw-logo {
    display: none !important;
}
Retrieved from "https://factorytown2.com/index.php?title=MediaWiki:Common.css&oldid=1160"