MediaWiki:Common.css

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

/* T-style like css. no longer needed: https://wiki.vrchat.com/index.php?title=Template:Infobox/styles.css&oldid=544
@import url("/index.php?title=Template:Infobox/styles.css&action=raw&ctype=text/css");
*/

	/* MAKE SURE THESE ARE NATIVE AT SOME POINT */
@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("/index.php?title=Template:MainPageInfopush.css&action=raw&ctype=text/css");

a:not(.icon-none)[href^="https://ask.vrchat.com"], a:not(.icon-none)[href^="https://docs.vrchat.com/"] {
  background-image: var(--icon-url) !important;
  background-position: center left !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  padding-right: 0 !important;
  padding-left: 1.5em;
}

a[href^="https://ask.vrchat.com"] {
	--icon-url: url("https://upload.wikimedia.org/wikipedia/commons/1/17/Discourse_icon.svg");
}

a:not(.icon-none)[href^="https://docs.vrchat.com"] {
	--icon-url: url("https://docs.vrchat.com/favicon.ico");
	padding-left: 1.6em;
}

[alt*="vrcat" i], [alt*="vrrat" i] {
	cursor: grab;
	transform-origin: bottom center;
	transition: transform 0.1s ease;
}

[alt*="vrcat" i]:active, [alt*="vrrat" i]:active {
	cursor: grabbing;
	transform: scaleY(.9) scaleX(1.1);
}

@keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.3);
            }

            100% {
                transform: scale(1);
            }
        }

/* Community distinction experiment */
@media screen {
  .mw-body h1.firstHeading {
    padding-bottom: .25em;
  }

  .ns-3000 .mw-page-title-separator {
    display: none;
  }

  .ns-3000 .mw-body h1.firstHeading {
    border-color: #2ace5b;
  }

  .ns-3000 .mw-page-title-namespace {
    color: #2ace5b;
    float: right;
    font-size: 0.8em;
  }
}

/* Note: The MediaWiki code editor will sometimes give errors for css parameters like --pi-background. These may safely be ignored. */

/* Portable Infobox tweaks */
.portable-infobox {
--pi-background:#303030;
--pi-secondary-background:#272735;
--pi-border-color:#a2a9b1;
--pi-item-spacing:5px 10px;
--pi-margin:15px;
--pi-width:270px;
  border-radius: 10px;
  background:#303035;
  clear:right;
  float:right;
  font-size:.85em;
  margin:0 0 15px 15px;
  width:270px;
}

.pi-theme-community  {
--pi-secondary-background:#067d4f;
   border: 1px solid #b8ffdb;
   border-radius: 10px;
   background-color: #085c3f;
   color: #e5f5bf;
   margin-bottom: 0.5em;
   margin-left: 1em;
   padding: 0.2em;
   float: right;
   clear: right;
}

.pi-theme-official  {
--pi-secondary-background:#216aad;
   border: 1px solid #166bcd;
   border-radius: 10px;
   background-color: #064987;
   color: #f7f6a3;
   margin-bottom: 0.5em;
   margin-left: 1em;
   padding: 0.2em;
   float: right;
   clear: right;
}

.portable-infobox .pi-data-value > :not(ul) {
  margin:.5em 0;
}

/* Hide Main Page unneeded stuff */
[class*=" page-Main_Page"] #firstHeading { display: none; }
[class*=" page-Main_Page"] .mw-editsection { display: none; }

/* Main Page Classes */
[class*=" page-Main_Page"] .mw-body .mw-parser-output h2 {
    margin: 0.9em 0.7em 0;
    padding: 0;
}

[class*=" page-Main_Page"] .mw-body .mw-parser-output h2:after {
	border-bottom: 0;
}

[class*=" page-Main_Page"] .mw-body .mw-parser-output h2:after {
    border-bottom: 0;
}

[class*=" page-Main_Page"] .mw-body .mw-parser-output h3 {
    margin: 0 0.3em 0.3em;
    padding: 0;
}

.qm-icon:before {
	display: inline-block;
	content: '';
	background-size: 0.85em;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.4em;
    position: relative;
    top: 0.1em;
}

@media screen and (max-width: 600px) {
    [class*=" page-Main_Page"] .mw-body .mw-parser-output h3 {
        margin: 0 0 0.3em;
        font-size: 1.4em;
    }
    
    .qm-icon:before {
		background-size: 0.75em;
	    width: 0.75em;
	    height: 0.75em;
	}
}

.qm-icon.version:before {background-image: url('https://wiki-files.vrchat.com/Icons_PinFPS_25.png');}
.qm-icon.news:before {background-image: url('https://wiki-files.vrchat.com/Icons_Announcement_25.png');}
.qm-icon.basics:before {background-image: url('https://wiki-files.vrchat.com/Icons_LaunchPad_25.png');}
.qm-icon.social:before {background-image: url('https://wiki-files.vrchat.com/Icons_Social_25.png');}
.qm-icon.economy:before {background-image: url('https://wiki-files.vrchat.com/Icons_VRCPlus_25.png');}
.qm-icon.worlds:before {background-image: url('https://wiki-files.vrchat.com/Icons_Worlds_25.png');}
.qm-icon.avatars:before {background-image: url('https://wiki-files.vrchat.com/Icons_Avatars_25.png');}
.qm-icon.creation:before {background-image: url('https://wiki-files.vrchat.com/Icons_CommunityLabs_25.png');}
.qm-icon.help:before {background-image: url('https://wiki-files.vrchat.com/Icons_HelpInfo_25.png');}
.qm-icon.community:before {background-image: url('https://wiki-files.vrchat.com/Icons_Favorite_25.png');}

.qm-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    column-gap: 1.5em;
    row-gap: 1.5em;
    margin: 0.75em 0 1.5em;
}

.qm-box {
    flex: 1 1 15%;
    min-width: 180px;
    padding: 1.5em;
    font-size: 1em;
    background-color: #171e28;
    background-color: rgba(50, 90, 120, 0.1);
    border: 3px solid #102f5b;
    border: 3px solid rgba(20, 70, 140, 0.5);
    border-radius: 1em;
}

.qm-box.community {
    background-color: #1a251c;
    background-color: rgba(40, 140, 40, 0.1);
    border-color: #1a4c24;
    border-color: rgba(40, 120, 40, 0.5);
}

.qm-box.flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    column-gap: 0.75em;
    row-gap: 0.75em;
    min-width: inherit;
    max-width: inherit;
}

@media screen and (max-width: 600px) {
    .qm-container {
    	column-gap: 0.75em;
    	row-gap: 0.75em;
    }
    
    .qm-box {
    	min-width: 120px;
    	padding: 0.75em;
    }
}

@media screen and (max-width: 1099px) {
	.desktop-only {
		display: none !important;
	}
}

@media screen and (min-width: 1100px) {
	.mobile-only {
		display: none !important;
	}
}

/* 🦀 REAL NAME IS GONE 🦀 */
[data-ooui*="Real name"] {
	pointer-events: none;
	display: none;
}