mediawiki-skins-Citizen/skinStyles/extensions/SemanticMediaWiki/ext.libs.tippy.less

/*
 * Citizen - SMW Lib Tippy
 * https://starcitizen.tools
*/

@import '../../../resources/variables.less';

@media ( prefers-color-scheme: dark ) {
	/**
  	tippy.css
    */
	.tippy-tooltip {
		color: @dark-text-100;
		background-color: @dark-bg-20;
	}

	/**
  	light-border.css
    */
	.tippy-tooltip.light-border-theme {
		background-color: @dark-bg-0;
		border: 1px solid rgba( 0, 8, 16, 0.15 );
		color: @dark-text-90;
		box-shadow: 0 3px 14px -0.5px rgba( 0, 8, 16, 0.08 );
	}

	.tippy-tooltip.light-border-theme .tippy-backdrop {
		background-color: @dark-bg-0;
	}

	.tippy-tooltip.light-border-theme .tippy-roundarrow {
		fill: @dark-bg-0;
	}

	.tippy-tooltip.light-border-theme .tippy-roundarrow:after {
		fill: rgba( 0, 8, 16, 0.15 );
	}

	.tippy-tooltip.light-border-theme[ x-placement^='top' ] .tippy-arrow {
		border-top-color: @dark-bg-0;
	}

	.tippy-tooltip.light-border-theme[ x-placement^='top' ] .tippy-arrow:after {
		border-top: 7px solid @dark-bg-0;
	}

	.tippy-tooltip.light-border-theme[ x-placement^='top' ] .tippy-arrow:before {
		border-top: 7px solid rgba( 0, 8, 16, 0.2 );
	}

	.tippy-tooltip.light-border-theme[ x-placement^='bottom' ] .tippy-arrow {
		border-bottom-color: @dark-bg-0;
	}

	.tippy-tooltip.light-border-theme[ x-placement^='bottom' ] .tippy-arrow:after {
		border-bottom: 7px solid @dark-bg-0;
	}

	.tippy-tooltip.light-border-theme[ x-placement^='bottom' ] .tippy-arrow:before {
		border-bottom: 7px solid rgba( 0, 8, 16, 0.2 );
	}

	.tippy-tooltip.light-border-theme[ x-placement^='left' ] .tippy-arrow {
		border-left-color: @dark-bg-0;
	}

	.tippy-tooltip.light-border-theme[ x-placement^='left' ] .tippy-arrow:after {
		border-left: 7px solid @dark-bg-0;
	}

	.tippy-tooltip.light-border-theme[ x-placement^='left' ] .tippy-arrow:before {
		border-left: 7px solid rgba( 0, 8, 16, 0.2 );
	}

	.tippy-tooltip.light-border-theme[ x-placement^='right' ] .tippy-arrow {
		border-right-color: @dark-bg-0;
	}

	.tippy-tooltip.light-border-theme[ x-placement^='right' ] .tippy-arrow:after {
		border-right: 7px solid @dark-bg-0;
	}

	.tippy-tooltip.light-border-theme[ x-placement^='right' ] .tippy-arrow:before {
		border-right: 7px solid rgba( 0, 8, 16, 0.2 );
	}

	/**
  	light.css
    */
	.tippy-tooltip.light-theme {
		color: @dark-text-90;
		box-shadow: 0 0 20px 4px rgba( 154, 161, 177, 0.15 ), 0 4px 80px -8px rgba( 36, 40, 47, 0.25 ), 0 4px 4px -2px rgba( 91, 94, 105, 0.15 );
		background-color: @dark-bg-0;
	}

	.tippy-tooltip.light-theme[ x-placement^='top' ] .tippy-arrow {
		border-top: 8px solid @dark-bg-0;
	}

	.tippy-tooltip.light-theme[ x-placement^='bottom' ] .tippy-arrow {
		border-bottom: 8px solid @dark-bg-0;
	}

	.tippy-tooltip.light-theme[ x-placement^='left' ] .tippy-arrow {
		border-left: 8px solid @dark-bg-0;
	}

	.tippy-tooltip.light-theme[ x-placement^='right' ] .tippy-arrow {
		border-right: 8px solid @dark-bg-0;
	}

	.tippy-tooltip.light-theme .tippy-backdrop {
		background-color: @dark-bg-0;
	}

	.tippy-tooltip.light-theme .tippy-roundarrow {
		fill: @dark-bg-0;
	}
}