Custom CSS for Basic Comment Quicktags WordPress Plugin

basic-comment-quicktags-plugin-styles.css

/**
 * Custom Styles for the Basic Comment Quicktags Plugin
 *
 * Add these to your child theme style.css file or the
 * "Additional CSS" in the Customizer.
 *
 * Customize the colors, borders, etc. to match your theme.
 */


.quicktags-toolbar {
	background-color: #f5f5f5;
	background-color: #f7f7f7;
	border: 1px solid #ccc;
	border-bottom: 0;
	padding: 0.125rem 0.375rem 0.25rem;
	min-height: 1.75rem;
	max-width: 600px;
}
.quicktags-toolbar input {
	display: inline-block;
	width: auto;
	margin: 0.125rem;
	padding: 0.25rem 0.75rem;
	font: 16px sans-serif;
	text-align: center;
	text-transform: lowercase;
	color: #333;
	border: 1px solid rgba(153, 153, 153, 0.4);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.2);
}
.quicktags-toolbar input[value=link] {
	text-decoration: underline;
}
.quicktags-toolbar input[value=i] {
	font-style: italic;
}
.quicktags-toolbar input[value=b] {
	font-weight: 700;
}
.quicktags-toolbar input:hover, .quicktags-toolbar input:active, .quicktags-toolbar input:focus {
	border-color: #999;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0, 0, 0, 0.08);
	color: #23282d;
}

basic-comment-quicktags-remove-default-css.php

/**
 * Remove/Dequeue CSS for the Basic Comment Quicktags Plugin
 *
 * This will remove the default CSS for the plugin. This is recommended if
 * you've included all the styles in your own theme.
 */

function esc_unprint_styles() {
	wp_dequeue_style( 'basic-comment-quicktags' );
}
add_action( 'wp_print_styles', 'esc_unprint_styles', 100 );