MediaWiki:Vector-darkmode.less/smw.less

From the RuneScape Wiki, the wiki for all things RuneScape
Jump to: navigation, search
// <pre>

/* =====================================
       SMW search and property pages
   ===================================== */

.smw-ask-query,
.smw-ask-actions {
	textarea {
		background-color: @ooui-interface;
		border-color: @ooui-interface-border;
		color: @ooui-text;
	}
}

.smw-ask-query-format {
	select {
		background-color: @ooui-interface;
		border: 1px solid @ooui-interface-border;
		color: @ooui-text;
	}
}

.smw-ask-sorting,
.smw-ask-options-fields {
	select {
		background-color: darken( @cloud-burst, 2% );
		border: 1px solid #4c5574;						// this is how it looks with 'rgba(250, 250, 255, .25)'
		color: @ooui-text;
	}
	
	input {
		background-color: darken( @cloud-burst, 2% );
		border: 1px solid #4c5574;						// this is how it looks with 'rgba(250, 250, 255, .25)'
		color: @ooui-text;
		padding: 2px 1px;
	}
}

// buttons
input {
	&.smw-ask-action-btn {
		&.smw-ask-action-btn-dblue {
			background-color: @ooui-normal;
			border-color: @ooui-normal-border;
			color: @ooui-text;
		}
	}
}

a {
	&.smw-ask-action-btn {
		&.smw-ask-action-btn-lblue {
			background-color:  @cloud-burst;
			border-color: lighten( @cloud-burst, 8% );
			color: @ooui-text;
			
			&:visited {
				background-color:  @cloud-burst;
				border-color: lighten( @cloud-burst, 8% );
				color: @ooui-text;
			}
			
			&:hover {
				background-color: lighten( @cloud-burst, 4% );
				border-color: lighten( @cloud-burst, 12% );
				color: @ooui-text;
			}
		}
	}
	
	&.smw-ask-action-btn-lgrey {
		background-color: @ooui-normal;
		border-color: @ooui-normal-border;
		color: @ooui-text;
		
		&:hover {
			background-color: @ooui-normal--hover;
			border-color: @ooui-normal-border--hover;
			color: @ooui-text;
		}
	}
}

// Callout messages
.smw-callout {
	color: @alabaster;

	&-error {
		background-color: @old-brick;
		border-color: @old-brick;
		border-left-color: @mocaccino;
	}
	&-info {
		background-color: @venice-blue;
		border-color: @venice-blue;
		border-left-color: @regal-blue;
	}
	&-success {
		background-color: @la-palma;
		border-color: @la-palma;
		border-left-color: @san-felix;
	}
	&-warning {
		background-color: @korma;
		border-color: @korma;
		border-left-color: @antique-bronze;
	}
}

// Property page usage count indicators
.smw-tabs input.nav-tab:checked + label.nav-label {
    color: inherit;
    
    &:hover {
    	color: @white;
    }
}

#tab-smw-property-value:checked + label.nav-label .usage-count {
		color: @white;
		background-color: @waikawa-grey;
		
		&.moderate {
			color: @white;
			background-color: @korma;
			border-color: @korma;
		}
		
		&.high {
			color: @white;
			background-color: @old-brick;
			border-color: @old-brick;
		}
}

// Property page results headers
.smw-property-page-results .header-title {
    background-color: @ooui-interface;
    border-bottom: 1px solid @waikawa-grey;
}

// Property page result rows hover
.smw-property-page-results .value-row:hover {
	background-color: @ooui-normal--hover;
}

// Property page browse/search links (+ signs in result rows)
#bodyContent span {
	&.smwbrowse,
	&.smwsearch {
		a:hover {
			color: @white;
		}
	}
}

// Tooltips
.tippy-tooltip.light-border-theme {
	background-color: @pickled-bluewood;
	color: @dark-text;
	
	.tippy-arrow {
		border-top-color: @pickled-bluewood;
		
		&:after {
			border-top-color: @pickled-bluewood;
		}
	}
}

.tippy-header {
	background-color: darken(@pickled-bluewood, 3.5%);
	border-bottom-color: @cloud-burst;
}

/* ===================
   FACTS under edits
==================== */

.smw-factbox {
	label#tab-label-facts-list {
		background-color: @pickled-bluewood;
		color: @dark-text;
		border-color: @waikawa-grey;
		border-bottom-color: @pickled-bluewood;
		border-top-color: orange;
	}
	
	section#tab-content-facts-list {
		border-color: @waikawa-grey;
		
		.smwfact /*more about...*/ {
			background-color: @pickled-bluewood;
			/*border-top-color: @waikawa-grey;*/
			color: @dark-text;
			
			.smwfacttable {
				border-top-color: @waikawa-grey;
			}
			
			.smw-table.smwfacttable {
				.smw-table-row:nth-child(odd) {
					background-color: darken( @pickled-bluewood, 4%);
				}
				.smw-table-row:nth-child(even) {
					background-color: @pickled-bluewood
				}
			}
			
		}
	}
}

// </pre>