Template:Hint/styles.css - Revision history

76561198048502585 at 10:52, 1 July 2026

2026-07-01T10:52:34Z

← Older revision		Revision as of 10:52, 1 July 2026
Line 56:		Line 56:
	/* Placement: top */		/* Placement: top */
	.wiki-hint-top .wiki-hint-floating {		.wiki-hint-top .wiki-hint-floating {
	bottom: ~~130~~%;		bottom: calc(100% + 8px);
	left: 50%;		left: 50%;
	transform: translateX(-50%);		transform: translateX(-50%);
Line 70:		Line 70:
	/* Placement: bottom */		/* Placement: bottom */
	.wiki-hint-bottom .wiki-hint-floating {		.wiki-hint-bottom .wiki-hint-floating {
	top: ~~130~~%;		top: calc(100% + 8px);
	left: 50%;		left: 50%;
	transform: translateX(-50%);		transform: translateX(-50%);

76561198048502585 at 10:52, 1 July 2026

2026-07-01T10:52:08Z

← Older revision		Revision as of 10:52, 1 July 2026
Line 100:		Line 100:
	.wiki-hint-right .wiki-hint-floating {		.wiki-hint-right .wiki-hint-floating {
	top: 50%;		top: 50%;
	left: ~~101~~%;		left: calc(100% + 8px);
	transform: translateY(-50%);		transform: translateY(-50%);
	}		}

76561198048502585 at 10:51, 1 July 2026

2026-07-01T10:51:00Z

← Older revision		Revision as of 10:51, 1 July 2026
Line 86:		Line 86:
	.wiki-hint-left .wiki-hint-floating {		.wiki-hint-left .wiki-hint-floating {
	top: 50%;		top: 50%;
	right: ~~101~~%;		right: calc(100% + 8px);
	transform: translateY(-50%);		transform: translateY(-50%);
	}		}

76561198048502585 at 10:50, 1 July 2026

2026-07-01T10:50:09Z

← Older revision		Revision as of 10:50, 1 July 2026
Line 86:		Line 86:
	.wiki-hint-left .wiki-hint-floating {		.wiki-hint-left .wiki-hint-floating {
	top: 50%;		top: 50%;
	right: ~~120~~%;		right: 101%;
	transform: translateY(-50%);		transform: translateY(-50%);
	}		}
Line 100:		Line 100:
	.wiki-hint-right .wiki-hint-floating {		.wiki-hint-right .wiki-hint-floating {
	top: 50%;		top: 50%;
	left: ~~120~~%;		left: 101%;
	transform: translateY(-50%);		transform: translateY(-50%);
	}		}

76561198048502585 at 11:21, 23 June 2026

2026-06-23T11:21:45Z

@@ Line 12: / Line 12: @@
 /* The hidden floating text */
-.wiki-hint .wiki-hint-floating {
+.wiki-hint-floating {
      visibility: hidden;
      opacity: 0;
@@ Line 18: / Line 18: @@
      /* Positioning */
      position: absolute;
      z-index: 100;
      /* Styling */
      background-color: #191b2c;
      border: solid 1px #d6bc7c;
@@ Line 30: / Line 29: @@
      padding: 6px 10px;
      border-radius: 4px;
      font-size: 0.9em;
      line-height: 1.2;
@@ Line 42: / Line 40: @@
 /* Little arrow pointing down at the content */
-.wiki-hint .wiki-hint-floating::after {
+.wiki-hint-floating::after {
      content: "";
      position: absolute;
      border-width: 5px;
      border-style: solid;
-     border-color: #d6bc7c transparent transparent transparent;
+     border-color: transparent;
+}
@@ Line 57: / Line 52: @@
      visibility: visible;
      opacity: 1;
+}

76561198048502585 at 15:27, 25 May 2026

2026-05-25T15:27:42Z

← Older revision		Revision as of 15:27, 25 May 2026
Line 5:		Line 5:
	border-bottom: 1px dotted #555; /* Visual cue that it's hoverable */		border-bottom: 1px dotted #555; /* Visual cue that it's hoverable */
	cursor: help;		cursor: help;
			}

			.wiki-hint-no-border {
			border-bottom: none;
	}		}

Line 11:		Line 15:
	visibility: hidden;		visibility: hidden;
	opacity: 0;		opacity: 0;

	/* Positioning */		/* Positioning */
	position: absolute;		position: absolute;
Line 18:		Line 22:
	transform: translateX(-50%);		transform: translateX(-50%);
	z-index: 100;		z-index: 100;

	/* Styling */		/* Styling */
	background-color: #191b2c;		background-color: #191b2c;
Line 29:		Line 33:
	font-size: 0.9em;		font-size: 0.9em;
	line-height: 1.2;		line-height: 1.2;

	/* Smooth fade-in transition */		/* Smooth fade-in transition */
	transition: opacity 0.2s ease, visibility 0.2s ease;		transition: opacity 0.2s ease, visibility 0.2s ease;

	/* Box shadow for a clean look */		/* Box shadow for a clean look */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

76561198048502585: A minor tooltip for short descriptions

2026-05-25T12:13:37Z

A minor tooltip for short descriptions

New page

/* Container for the hint */
.wiki-hint {
position: relative;
display: inline;
border-bottom: 1px dotted #555; /* Visual cue that it's hoverable */
cursor: help;
}

/* The hidden floating text */
.wiki-hint .wiki-hint-floating {
visibility: hidden;
opacity: 0;

/* Positioning */
position: absolute;
bottom: 130%; /* Places it right above the text */
left: 50%;
transform: translateX(-50%);
z-index: 100;

/* Styling */
background-color: #191b2c;
border: solid 1px #d6bc7c;
color: #fff;
text-align: center;
padding: 6px 10px;
border-radius: 4px;
white-space: nowrap; /* Prevents awkward wrapping */
font-size: 0.9em;
line-height: 1.2;

/* Smooth fade-in transition */
transition: opacity 0.2s ease, visibility 0.2s ease;

/* Box shadow for a clean look */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Little arrow pointing down at the content */
.wiki-hint .wiki-hint-floating::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #d6bc7c transparent transparent transparent;
}

/* Reveal on hover */
.wiki-hint:hover .wiki-hint-floating {
visibility: visible;
opacity: 1;
}