MediaWiki:Mobile.less/infobox.less

De RuneScape Wiki
Ir para: navegação, pesquisa
// <pre>
/* ====================
       new infoboxes
   ==================== */

@infobox-background: @alabaster;
@infobox-header-color: @jelly-bean;
@infobox-header-border: .5em solid @infobox-background;
@infobox-subheader-color: @fountain-blue;
@infobox-cell-border: 1px solid darken( @infobox-background, 4% );

.rsw-infobox {
  	font-size: 85%;
  	background-color: @infobox-background;
    box-shadow: @box-shadow;
    margin-bottom: 2.5em !important;
    max-width: 300px;
    display: table !important;

    // https://stackoverflow.com/questions/11315913/
    tbody {
        width: 100%;
        display: table;
    }
    
    .infobox-image {
    	text-align: center;
    }

    .infobox-header {
        color: @white;
        font-size: 1.15em;
        background: @infobox-header-color;
        border-bottom: @infobox-header-border;
        padding: .5em 0;
    }

    .infobox-subheader {
        background: @infobox-subheader-color;
        color: @white;
        line-height: 2em;
        border-top: @infobox-header-border;
        border-bottom: @infobox-header-border;

        a {
        	color: @white;
        }
    }

    // not header, subheaders, or images
    th:not(.infobox-header):not(.infobox-subheader) {
        text-align: right;
        vertical-align: top;
        border-left: @infobox-cell-border;
        border-right: .175em solid @infobox-subheader-color;
        padding: 0.2em 0.5em;
    }

    td {
        &:not(.infobox-image):not(.infobox-map) {
            border-right: @infobox-cell-border;
            padding: 0.25em 0.5em;
            line-height: 1.6em;
        }

        // for full width td's at the bottom like infobox item examine
        &[colspan="2"]:not(.infobox-image):not(.infobox-map) {
            border: @infobox-cell-border;
            padding-bottom: .6em;
        }
    }
    
    .infobox-map {
    	border: @infobox-cell-border;
        border-top: none;
        text-align: center;
        padding: 7px 0;
    }
    
    .infobox-bottom-links, // in case any old templates still use this class
    .infobox-template-links {
        display: none;
    }

	//Infobox Monster
	&.infobox-monster {
		
		//because 'Release' and 'Members' is fucky
		font-size: 80%;
		
		tbody {
			table-layout: fixed;
		}
		
		input[type='number'] {
			background: @white;
			border: 1px solid darken(@alabaster, 4%);
			padding: 2px;
		}
		
		td {
			text-align: center;

			&:not(.infobox-image):not(.infobox-map) {
				border-right: @infobox-cell-border;
				border-left: @infobox-cell-border;
			}
		}
		
		th {
			&:not([colspan="2"]):last-child {
				border-right: @infobox-cell-border;
			}

		    &.infobox-header,
		    &.infobox-subheader,
		    &.combat-subheader {
		    	text-align: center;
		    }

			&.offensive-header {
	    		background-color: @mocaccino;
	    		color: @white;
	    		text-align: center;
	    	}
	
		    &.offensive-subheader {
		        background-color: #ecccc6;
				color: @mocaccino;
	    		text-align: center;
		
		        a {
		            color: @mocaccino;
		        }
		        
				&:not(:last-child) {
		    		border-right: 0.175em solid @mocaccino;
		    	}
		    }
	
		    &.defensive-header {
		        background-color: @steel-blue;
		        color: @white;
	    		text-align: center;
		    }
		
		    &.defensive-subheader {
		        background-color: #c1deed;
				color: #222222;
	    		text-align: center;
		
		        a {
		            color: #222222;
		        }
		    }
		
		    &.slayer-header {
	            background: @tundora;
	            color: @white;
	            text-align: center;
	        }
	        
	        &.slayer-subheader {
	        	background-color: @silver;
	        	color: @tundora;
	        	text-align: center;
	        	
	        	&:not(:last-child) {
	        		border-right: 0.175em solid @tundora;
	        	}
	        }
		}
	}
	
	//User Stats
	&.infobox-user-stats {
		th {
			border: none;
			
			&.infobox-header {
				text-align: center;
				border-bottom: none;
				
				a, a:visited {
					color: @white;
				}
			}
			
			&.infobox-subheader {
				text-align: center;
				border-top: none;
				border-bottom: .175em solid @alabaster
			}
		}
		
		td:not(.infobox-image):not(.infobox-map):last-child {
			border: none;
		}
	}
	
	// Infobox familiar
	&#infobox-familiar {

		tbody {
			table-layout: fixed;
		}
		
		th {
			&[colspan="2"] {
				text-align: right;
				border-right: 0.175em solid #6ba5c8;
				padding: 0.2em 0.5em;
			}
			
			&[colspan="4"] {
				text-align: center;
			}

			&:last-child {
				border-right: 1px solid #efefef;
			}
			
			&:first-child {
				border-left: 1px solid #efefef;
			}
		}
		
		td {
		
			&.infobox-template-links {
				border: 1px solid #efefef !important;
				padding-bottom: .6em;
			}
			
			&:first-child {
				border-left: 1px solid #efefef !important;
			}
			
			&:last-child {
				border-right: 1px solid #efefef !important;
			}
			
			&:not(.infobox-image):not(.infobox-map) {
				border: none;
			}
			
			&[colspan="2"]:not(.infobox-image):not(.infobox-map) {
				border: none;
				padding: 0.25em 0.5em;
			}
		}
	}
	.advanced-data {
    	display: none;
	}
}

.infobox-bonuses.wikitable {
	font-size: 0.9rem;
   
	th {
		min-width: 50px !important;
	}
}

//Mostly portrait mode
@media screen and (max-width: 560px) {
    .infobox-wrapper {
        width: 100% !important;
    }
}

@media screen and (max-width: 499px) {
    .rsw-infobox {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

//Mostly landscape mode
@media screen and (min-width: 500px) {
	.rsw-infobox {
		float: right;
		margin-left: 1em !important;
	}
}

// </pre>