5etools-mirror-2.github.io/scss/includes/vars.scss

@font-face {
	font-family: "Convergence";
	font-style: normal;
	font-weight: 400;
	src: local("Convergence-Regular"), url("../fonts/Convergence-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400;
	src: local("Roboto"), url("../fonts/Roboto-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Glyphicons Halflings";
	font-style: normal;
	font-weight: 400;
	src: local("glyphicons-halflings-regular"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2");
}

@font-face {
	font-family: "Blambot Casual";
	src: local("Blambot-Casual"), url("../fonts/Blambot-Casual-Regular.woff2") format("woff2");
}

@keyframes kf-fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

$pct-darken-active: 10%;
$pct-darken-border: 15%;
$pct-darken-border--active: 20%;
$pct-darken-hover: 5%;

$sz-y-header: 73px;

$spacer: 1rem;

$rgb-off-black: #333;

$rgb-active-blue--light: #7398b7;
$rgb-active-blue: #337ab7;
$rgb-active-blue--dark: #2a6496;
$rgb-active-red--light: #8a4b4b;
$rgb-active-red: #8a1a1b;
$rgb-active-red--dark: #711617;
$rgb-inactive-grey: #c3c3c3;

$rgb-name-red: #822000;
$rgb-name-red--night: #d29a38;
$rgb-name-alt--night: #c2c2c2;
$rgb-bg-orange: #fdf1dc;
$rgb-bg-highlight: yellow;
$rgb-border-yellow--statblock: #e69a28;

$rgb-link-blue: $rgb-active-blue;
$rgb-link-blue--muted: #7096b7;
$rgb-link-blue--night: #7db6e8;
$rgb-link-blue--muted-night: #6e8eab;

$rgb-border-grey: #ccc;
$rgb-border-grey--trans: #cccccca0;
$rgb-border-grey--trans-muted: #ccc6;
$rgb-border-grey--muted: #eee;
$rgb-border-grey--list-row: #ddd;
$rgb-border-grey--night: #555;
$rgb-border-grey--trans-night: #555555a0;
$rgb-border-grey--list-row-night: #444;
$rgb-border-grey--statblock-night: #565656;

$rgb-modal-overlay-grey: #45454588;
$rgb-shadow-grey: rgba(0, 0, 0, 0.175);
$rgb-shadow-grey--dark: rgba(0, 0, 0, 0.475);

$rgb-stripe-grey: #88888818;
$rgb-stripe-grey--faint: #bbbbbb18;
$rgb-stripe-grey--night: #aaa4;

$rgb-cb-grey: #666;

$rgb-bg: white;
$rgb-bg--alt: whitesmoke;
$rgb-bg-homebrew: rgba(255, 0, 0, 0.1);

$rgb-bg--night: #222;
$rgb-bg--alt-night: #383838;
$rgb-bg-homebrew--night: rgba(255, 0, 0, 0.15);

$rgb-bg-highlight--night: #cc0;
$rgb-font: #333;
$rgb-font--muted: #777;
$rgb-font--night: #bbb;

$rgb-form-control-bg--night: #222;

$rgb-ctx-item-text-disabled: #777;

$rgb-alert-text-success: #3c763d;
$rgb-alert-text-info: #31708f;
$rgb-alert-text-warning: #8a6d3b;
$rgb-alert-text-danger: #a94442;

$rgb-btn-default-active--night: #ffffff40;

$rgb-btn-danger-bg-red: #d9534f;
$rgb-btn-danger-bg-red--night: #7e3a38;

$rgb-btn-danger-border-red: #ac2925;

$rgb-btn-primary-blue: $rgb-active-blue;
$rgb-btn-primary-blue--desaturated: #b8b8b8;

$rgb-class-variant: #8f903c;
$rgb-class-ua: #827e00;
$rgb-subclass: #337ab7;
$rgb-subclass--stale: #7699b7;
$rgb-subclass-ua: #1d965d;
$rgb-subclass-ua--stale: #5f967c;
$rgb-class-brew: #8c3b96;
$rgb-class-variant-brew: #ba75a1;

$rgb-class-variant--night: #e6ab94;
$rgb-class-ua--night: #a2ce42;
$rgb-subclass--night: $rgb-subclass;
$rgb-subclass--night-stale: $rgb-subclass--stale;
$rgb-subclass-ua--night: #179e50;
$rgb-subclass-ua--night-stale: #509e8a;
$rgb-class-brew--night: #aa40b4;
$rgb-class-variant-brew--night: #da9db5;

$rgb-roll-min: #ff3100;
$rgb-roll-max: #00b400;
$rgb-roll-min--muted: desaturate($rgb-roll-min, 35%);
$rgb-roll-max--muted: desaturate($rgb-roll-max, 35%);

// Colors blended using https://www.w3schools.com/colors/colors_mixer.asp
$rgb-btn-primary-blue--night: #2a4e6c; // #337ab7 blended with #222
$rgb-btn-danger-red--night: #7e3a38; // #d9534f blended with #222
$rgb-btn-warning-orange--night: #896838; // #f0ad4e blended with #222
$rgb-btn-info-blue--night: #2a697c; // #31b0d5 blended with #222
$rgb-btn-success-green--night: #427442; // #5cb85c blended with #222

$rgb-alert-info-blue--night: #375a7f;
$rgb-alert-danger-red--night: #8d1d1a;
$rgb-alert-warning-orange--night: #cd8514;
$rgb-alert-success-green--night: #009e56;

$rgb-alert-info-border-blue--night: lighten($rgb-alert-info-blue--night, $pct-darken-border);
$rgb-alert-danger-border-red--night: lighten($rgb-alert-danger-red--night, $pct-darken-border);
$rgb-alert-warning-border-orange--night: lighten($rgb-alert-warning-orange--night, $pct-darken-border);
$rgb-alert-success-border-green--night: lighten($rgb-alert-success-green--night, $pct-darken-border);

/* Z-Indices */
$z-token-image: 10;

$z-side-menu: 60;

$z-omnisearch: 100;
$z-book-find: 100;
$z-bookmode: 100;
$z-rollerbox-hidden: 100;
$z-rollerbox-active: 110;

// Z-indices 200-300 reserved for hover windows
$z-hwin: 200;

$z-search: 900;

$z-modal-wrapper: 1000;
$z-modal-inner: 1001;
$z-modal-legal: 1000;

$z-context-menu: 1100;

$z-temp-effect: 2000;

/* *** */

/* region Timing */
$time-1-frame: 17ms;
$time-2-frames: 34ms;
$time-3-frames: 51ms;
$time-4-frames: 67ms;
$time-5-frames: 84ms;
/* endregion */

// region Widths
$w-ipt-number-1-digit: 24px;
$w-ipt-number-1-5-digit: 30px;
$w-ipt-number-2-digit: 40px;
$w-ipt-number-3-digit: 60px;
$w-ipt-number-4-digit: 80px;

$w-scroll-body: 15px;
// endregion

// region Heights
$h-ipt-xs: 22px;
// endregion

// region Fonts
$font-line-height: 1.42857143;
// endregion

@mixin shadow-1 () {
	box-shadow: 0 6px 12px $rgb-shadow-grey;
}

@mixin shadow-1--dark () {
	box-shadow: 0 6px 12px $rgb-shadow-grey--dark;
}

@mixin shadow-2 () {
	box-shadow: 0 3px 6px $rgb-shadow-grey;
}

@mixin shadow-active {
	box-shadow: 0 0 2px 0 #000b;
}

@mixin shadow-active--night {
	box-shadow: 0 0 3px 0 #fffb;
}

@mixin row-glow-active {
	box-shadow: inset 0 0 0 5000px rgba(0, 107, 196, 0.3);
}

@mixin row-glow-active--alt {
	box-shadow: inset 0 0 0 5000px rgba(148, 148, 148, 0.2);
}

@mixin overflow-dots {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@mixin vr {
	width: 1px;
	height: 100%;
	border-left: 1px solid $rgb-border-grey;
}

@mixin is-print {
	@media print {
		@content;
	}

	@at-root html.is-faux-print #{&} {
		@content;
	}
}

/* *** */

@mixin font-regular {
	font-family: Arial, sans-serif;
	font-variant: normal;
	font-weight: normal;
}

$width-screen-xs: 480px;
$width-screen-sm: 768px;
$width-screen-md: 991px;
$width-screen-lg: 1200px;

$width-screen-xs--min: 481px;
$width-screen-sm--min: 769px;
$width-screen-md--min: 992px;
$width-screen-lg--min: 1201px;

// region linked titles
%linked-titles-base {
	.rd__h--0 .entry-title-inner:hover::before {
		font-size: 50%;
	}

	.rd__h--1 .entry-title-inner:hover::before {
		font-size: 55%;
	}

	.rd__h--2 .entry-title-inner:hover::before {
		font-size: 60%;
	}
}

%linked-titles-base-inner {
	cursor: copy;

	&:hover::before {
		content: " 🔗";
		color: rgba(0, 0, 0, 0.2);
		position: relative;
		float: left;
		width: 14px;
		height: 14px;
		right: 20px;
		margin-right: -30px;
		font-size: 85%;
	}
}
// endregion

// region filters
$fltr-stripe: 11px;
$fltr-2stripe: 22px;
// endregion

// region Shared UI
@mixin cb-custom {
	width: 16px;
	height: 16px;
	padding: 0;
	flex-shrink: 0;
	flex-grow: 0;
	display: inline-block;
	cursor: pointer;
	border: 1px solid $rgb-border-grey;
	border-radius: 4px;
	outline: none;
	user-select: none;

	&:active {
		@include shadow-active();
	}

	&.active {
		background: $rgb-cb-grey;
		border-color: lighten($rgb-cb-grey, 15%);

		&.disabled {
			background-color: lighten($rgb-cb-grey, 25%);
		}
	}

	&.disabled {
		cursor: default;
		box-shadow: none;
	}
}

@mixin cb-custom--night {
	background: $rgb-bg--night;
	border-color: $rgb-border-grey--night;

	&:active {
		@include shadow-active--night();
	}

	&.active {
		background: $rgb-border-grey--night;
		border-color: lighten($rgb-border-grey--night, 10%);

		&.disabled {
			background-color: lighten($rgb-border-grey--night, 20%);
		}
	}

	&.disabled {
		box-shadow: none;
	}
}
// endregion