MediaWiki:Common.css: Difference between revisions

From VRChat Wiki
m (More icons)
m (Fixed economy icon link)
Line 88: Line 88:
.qm-icon.culture:before {background-image: url('https://wiki-files.vrchat.com/Icons_QMInfo_25.png');}
.qm-icon.culture:before {background-image: url('https://wiki-files.vrchat.com/Icons_QMInfo_25.png');}
.qm-icon.social:before {background-image: url('https://wiki-files.vrchat.com/Icons_Social_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.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.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.avatars:before {background-image: url('https://wiki-files.vrchat.com/Icons_Avatars_25.png');}

Revision as of 23:49, 28 July 2024

/* 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");
*/

/* 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 */
.page-Main_Page #firstHeading { display: none; }
.page-Main_Page .mw-editsection { display: none; }

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

.page-Main_Page .mw-body .mw-parser-output h2:after {
    border-bottom: 0;
}

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

.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.culture:before {background-image: url('https://wiki-files.vrchat.com/Icons_QMInfo_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-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    column-gap: 20px;
    row-gap: 20px;
    margin: 10px 0 20px;
}

.qm-box {
    flex: 1 1 20%;
    min-width: 180px;
    padding: 20px;
    font-size: large;
    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: 25px;
}

.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: 10px;
    row-gap: 10px;
    min-width: inherit;
    max-width: inherit;
}