User:Perseonn/common.css

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

table.repha-table th a,
.btn-primary a {
    color:#ffffff;
}
 
.btn-primary a:hover {
    color:#f4eff1;
    text-decoration:none;
}
 
.text-color-1{
    color: #F4EFF1;
}
.text-color-2{
    color: #F5D4D2;
}
.text-color-3{
    color: #F3AABC;
}
.text-color-4{
    color: #F6DEE6;
}
 
.infobox-header,
table.repha-table th,
.text-color-5{
    color: #E1808E;
}
 
.form-group:nth-child(2n+0),
table.repha-table tr:nth-child(2n+0),
.bg-color-1{
    background-color: #F4EFF1;
}
 
.bg-color-2{
    background-color: #F5D4D2;
}
 
.bg-color-3{
    background-color: #F3AABC ;
}
 
.infobox-header,
table.repha-table th,
.bg-color-4{
    background-color: #F6DEE6;
}


/*    CAST-ROSTER
==============================================================================*/
.enable-none {display:none;}
.enable-yes > .enable-none {display:inline!important;}
.cast-roster-middle {max-height:192px;}
.cast-roster-middle-top {height:96px; padding-left:1em; padding-top: 0.5em;}
.cast-roster-middle-bottom {height:95px; padding:1em; border-top: 1px solid #ddd; background-image: linear-gradient(to bottom,#e8e8e8 0,#f5f5f5 100%); font-size:80%;}
.cast-roster-line-container {margin-top:5px;}
.cast-roster-line {border-left:6px solid #43731d; padding-left: 4px; font-size:108%;}
.cast-roster-image {max-width:100%;}
.cast-roster-category {font-size:90%;}
.cast-roster-category p {margin-bottom: 0px;}
.cast-roster-name {font-size: 160%;}
.cast-roster-panel-small {margin-bottom: 6px}
.cast-roster-panel-main {margin-bottom: 0.5em;}
.cast-roster-category, .cast-roster-middle, .cast-roster-middle-bottom  {width:100%;}
.cast-roster-extra {padding: 0px 4px; height: 18px;}
.cast-roster-card {border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.cast-roster-card-container, .cast-roster-middle, .cast-roster-middle-bottom, .cast-roster-line-container, .cast-roster-name-container, .cast-roster-category, .cast-roster-line-container {float:left;}

@media (min-width: 768px) and (max-width: 991px){
    /* Small */
    .cast-roster-image-container{float:left;}
    .cast-roster-image{border-top-right-radius: 4px; border-top-left-radius: 4px;}
    .hidden-sm{display:none;}
}
 
@media (min-width: 992px) and (max-width: 1199px){
    /* Medium */
    .cast-roster-middle{max-width:496px;}
    .cast-roster-image-container{float:right;}
    .cast-roster-image{max-height:191px; border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
    .hidden-md{display:none;}
}
 
@media (min-width: 1200px){
    /* Large */
    .cast-roster-middle{max-width:535px;}
    .cast-roster-image-container{float:right;}
    .cast-roster-image{max-height:191px;border-top-right-radius: 4px; border-bottom-right-radius: 4px;}
}


/*    BOOTSTRAP-BORROWED ROUTINE
==============================================================================
The media width are bootstrap standard, please do not ask to change it.*/

@media (max-width: 767px){
    /* Ex-Small */
    .hidden-xs{display:none;}
}

@media (min-width: 768px) and (max-width: 991px){
    /* Small */
    .hidden-sm{display:none;}
}

@media (min-width: 992px) and (max-width: 1199px){
    /* Medium */
    .hidden-md{display:none;}
}

@media (min-width: 1200px){
    /* Large */
    .hidden-lg{display:none;}
}


/*    RING CONTAINER
==============================================================================*/
.float-left, div[class*="-grind"] {float:left;}
div[class*="ring-container-"] > .wikitable {margin:0px; min-height: 142px; width:100%;}
.ring-container {display:inline-block;}
.ring-container, .ring-container-image, .ring-container-name, .ring-container-properties, .ring-container-material, div[class*="-grind"] {width:100%;}
div[class*="-header-"] {font-weight: 600;}
.ring-container-grind{}
div[class*="header-grind"], div[class*="header-stat"], div[class*="header-plus"], div[class*="stat-value"] {box-sizing: border-box;background-color: #f2f2f2; border:1px solid #aaa; padding-left: 0.2em;}


@media (max-width: 767px){
    /* Ex-Small */
    .ring-container-image {max-width: 100%;}
    .ring-container-name {max-width: 100%;}
    .ring-container-description {max-width: 100%;}
    .ring-container-properties {max-width: 25%;}
    .ring-container-material {max-width: 75%;}
    div[class*="header-grind"], div[class*="header-stat"] {max-width:25%;}
    div[class*="header-plus"], div[class*="stat-value"] {max-width:25%;}

}

@media (min-width: 768px) and (max-width: 991px){
    /* Small */
    .ring-container-image {max-width: 25%;}
    .ring-container-name {max-width: 75%;}
    .ring-container-description {max-width: 100%;}
    .ring-container-properties {max-width: 33%;}
    .ring-container-material {max-width: 67%;}
    div[class*="header-grind"], div[class*="header-stat"] {max-width:16%;}
    div[class*="header-plus"], div[class*="stat-value"] {max-width:14%;}
}

@media (min-width: 992px) and (max-width: 1199px){
    /* Medium */
    .ring-container-image {max-width: 13%;}
    .ring-container-name {max-width: 37%;}
    .ring-container-description {max-width: 50%;}
    .ring-container-properties {max-width: 25%;}
    .ring-container-material {max-width: 75%;}
    div[class*="header-grind"], div[class*="header-stat"] {max-width:20%;}
    div[class*="header-plus"], div[class*="stat-value"] {max-width:8%;}
}

@media (min-width: 1200px){
    /* Large */
    .ring-container-image {max-width: 13%;}
    .ring-container-name {max-width: 23%;}
    .ring-container-description {max-width: 34%;}
    .ring-container-properties {max-width: 10%;}
    .ring-container-material {max-width: 20%;}
    div[class*="header-grind"], div[class*="header-stat"] {max-width:20%;}
    div[class*="header-plus"], div[class*="stat-value"] {max-width:8%;}
}