MediaWiki:Common.css: Difference between revisions

From VRChat Wiki
m (More main page fixes)
m (Testing row gap)
Line 76: Line 76:
     justify-content: space-around;
     justify-content: space-around;
     column-gap: 20px;
     column-gap: 20px;
    row-gap: 20px;
     margin: 10px 0 20px;
     margin: 10px 0 20px;
}
}

Revision as of 06:02, 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 h2 {
    margin: 10px 10px 0;
}

.page-Main_Page h2:after {
    border-bottom: 0;
}

.page-Main_Page h3 {
    margin: 0 10px 10px;
}

.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: 20%;
    max-width: 50%;
    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;
    min-width: inherit;
    max-width: inherit;
}