MediaWiki:Common.css

Note: After publishing, 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: Press Ctrl-F5.

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

/**
 * This is some CSS to add colour to the editing icons.
 *
 * It uses green for add/save, yellow for edit, red for remove,
 * orange for cancel and blue for help.
 *
 * To use it, add the following line to the top of your common.css:
 * @import url("/w/index.php?title=User:Nikki/colour_icons.css&action=raw&ctype=text/css");
 *
 * @license CC0-1.0
 */

/*** Add and save icons - green ***/

.wb-lexeme .lemma-widget_save::before,
.wikibase-toolbar-button-add .wb-icon,
.wikibase-toolbar-button-save .wb-icon {
	filter: invert() sepia() saturate(10000%) hue-rotate(17deg) brightness(0.4) saturate(7.5);
}

/*** Edit icon - yellow ***/

.wb-lexeme .lemma-widget_edit::before,
.wikibase-toolbar-button-edit .wb-icon {
	filter: invert() sepia() saturate(10000%) hue-rotate(350deg) brightness(0.63) saturate(4.5);
}

/*** Remove icon - red ***/

.wb-lexeme .wikibase-lexeme-sense-glosses-remove::before,
.wb-lexeme .representation-widget_representation-remove:not(:disabled),
.wb-lexeme .lemma-widget_lemma-remove,
.wikibase-toolbar-button-remove .wb-icon {
	filter: invert() sepia() saturate(10000%) hue-rotate(291deg) brightness(0.63) saturate(4.5);
}

/*** Cancel icons - orange ***/

.wb-lexeme .lemma-widget_cancel::before,
.wikibase-toolbar-button-cancel .wb-icon {
	filter: invert() sepia() saturate(10000%) hue-rotate(323deg) brightness(0.5) saturate(7.5);
}

/** Help icon - blue ***/

.wb-help-field-hint {
	filter: invert() sepia() saturate(10000%) hue-rotate(175deg) brightness(0.4) saturate(8);
}

/*** Other fixes ***/

.wb-lexeme .representation-widget_representation-remove:enabled,
.wb-lexeme .lemma-widget_lemma-remove {
	/* Lexeme lemmas and form representations use text instead of an icon */
	/* Set the colour to black so it can be coloured in the same way as the black icons */
	color: black;
}

.wb-lexeme .wikibase-lexeme-sense-glosses-remove::before
 {
	/* Add a remove icon when editing glosses on senses */
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Cpath d=%22M17 2h-3.5l-1-1h-5l-1 1H3v2h14zM4 17a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V5H4z%22/%3E%3C/svg%3E");
	background-position: center;
	background-size: 16px 18px;
	content: "";
	display: inline-block;
	height: 20px;
	opacity: 0.7;
	vertical-align: middle;
	width: 20px;
}

.wb-lexeme .wikibase-lexeme-sense-gloss-actions-cell {
	/* Let the buttons for removing a gloss use as much space as they need */
	width: auto; /* was: 0.01% */
}