DnD5 Condition Tooltips en

Installations 52 Likes 5

A companion theme for my DnD5 Conditions content pack. This theme decorates tooltips on links that point to those conditions to look more like excerpts from the rulebook. You can also create more entities that will use the same styling by simply giving them the DD5 Condition tag!

Note that links generated by Kanka (e.g. in entity lists), as opposed to mentions created by users in entities, do not allow the same flexibility in styling their tooltips. If you notice that the outer border looks different in those places, that is normal (albeit not intended).

Troubleshooting

I can see the fancy tooltips, but my players only see default tooltips

If your campaign does not allow some users or roles to see tags, this theme will not work for them. They at least need read access to the DD5 Condition tag.

Latest version 2.1 View content

Released 1 year ago

Slightly darker description text to improve legibility over the background.
Improved list formatting for the Exhaustion condition.

Plugin CSS for 2.1


/* BEGIN DnD5 Condition Tooltips by Salvatos */
/** Style outer container (requires :has) **/
/* Background */
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box {
	background: url(https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/OnfHKKTT4rtOeeQZLHwv1ddpZtKMJbykZ52WUwsg.jpg), #dbcbae;
	padding: 5px 8px;
}
/* Border and arrow */
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box {
	padding: 0;
	border: 3px solid #333;
}
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box[data-placement^="bottom"]>.tippy-arrow:before {
	border-bottom-color: #333;
}
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box[data-placement^="top"]>.tippy-arrow:before {
	border-top-color: #333;
}
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box[data-placement^="left"]>.tippy-arrow:before {
	border-left-color: #333;
}
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box[data-placement^="right"]>.tippy-arrow:before {
	border-right-color: #333;
}
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box[data-placement^="top"] > .tippy-arrow {
	bottom: -1px;
}
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box[data-placement^="bottom"] > .tippy-arrow {
	top: -1px;
}
/* Fallback for :has */
@supports not (body:has(a.entity-mention)) {
	.tooltip-content.kanka-tag-dd5condition {
		background: url(https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/OnfHKKTT4rtOeeQZLHwv1ddpZtKMJbykZ52WUwsg.jpg), #dbcbae;
		padding: 5px 8px;
		border-radius: 3px;
	}
}

/** Style inner container **/
/* Style name */
.tooltip-content.kanka-tag-dd5condition .entity-name {
	font-family: "Andada Pro", serif;
	font-variant: small-caps;
	font-size: 15px;
	font-weight: bold;
	text-align: left;
	text-decoration: underline;
	color: #a4280b;
}
/* Hide tags*/
.tooltip-content.kanka-tag-dd5condition .tooltip-tags {
	display: none;
}
/* Style paragraphs: mimic list items, which are not parsed in tooltips */
.tooltip-content.kanka-tag-dd5condition p::before {
	content: "• ";
}
.tooltip-content.kanka-tag-dd5condition p {
	font-family: "Libre Baskerville", sans-serif;
	font-size: 12px;
	color: #111;
	margin-bottom: 5px;
  	hyphens: auto;
}
/* Tooltip definitions */
.tooltip-content.kanka-tag-dd5condition p a[title] {
	text-decoration: underline dotted;
	font-style: italic;
	color: inherit;
	font-family: inherit;
}
/* Exceptions for Exhaustion */
.tooltip-content.kanka-tag-dd5condition .exhaustion p:first-child::before {
	content: "";
}
.tooltip-content.kanka-tag-dd5condition tr:not(:last-child) {
	border-bottom: 1px dotted #777
}
.tooltip-content.kanka-tag-dd5condition table {
	font-family: "Libre Baskerville", sans-serif;
	font-size: 12px;
	color: #111;
	vertical-align: baseline;
  	margin-bottom: 5px;
}
.tooltip-content.kanka-tag-dd5condition td {
	padding-left: 5px;
}
.tooltip-content.kanka-tag-dd5condition th {
	padding-inline: 2px 5px;
	border-right: 1px dotted #777;
	font-weight: normal;
}
/* END DnD5 Condition Tooltips by Salvatos */