MediaWiki:Common.css: Difference between revisions

From Pokemon Revolution Online Wiki
Jump to navigation Jump to search
Added the groundwork for switchable tabs, which will be used on Pokemon infoboxes—particularly for multiform species (e.g., Castform).
mNo edit summary
Line 87: Line 87:


.tab button:hover {
.tab button:hover {
  background-color: #DDD;
   text-decoration: underline;
   text-decoration: underline;
}
}


.tab button.active {
.tab button.active {
   background-color: inherit;
   background-color: #FFF;
}
}



Revision as of 02:52, 1 April 2020

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

.pro-table {
    background-color: #333333;
    border: 5px solid #000000;
    border-radius: 20px;
    padding: 3px;
    cellspacing: 2px;
    cellpadding: 2px;
    border-spacing: 5px 5px;
    color: white;
}

.pro-table-header {
    background-color: #1B1A1A;
    color: #FFB600;
    border-radius: 30px;
    border: 1px solid #000000;
    font-weight: bold;
    font-size: 125%;
    text-align: center;
    padding: 4px;
}

.pro-table-header-cell {
    padding: 7px;
    border: 3px solid #000000;
}

.pro-table-row {
    background-color: #DDD;
    color: #000000;
}

.circular-icon {
    width: 55px;
    height: 55px;
    border-radius: 35px;
    border: 3px solid #000000;
    background-color: white;
    text-align: center;
    padding: 5px;
    margin: auto auto;
    vertical-align: center;
}

.pro-table-cell {
    background-color: #666666;
    border-radius: 20px;
    border: 1px solid #000000;
    padding: 4px;
}

.informational-box {
margin-left: 15px;
margin-top: 5px;
margin-bottom: 5px;
cellspacing: 2px;
float: right;
text-align: center;
padding: 3px;
}

.top-align {
    vertical-align: top;
}

.middle-align {
    vertical-align: middle;
}

.tab {
  overflow: hidden;
}

.tab button {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  text-decoration: underline;
}

.tab button.active {
  background-color: #FFF;
}

.tabcontent {
  display: none;
}