Template:TemplateBase/Country/styles.css - Revision history

imported>Swinbooru: Undo revision 44548 by Swinbooru (talk)

2026-05-29T15:56:20Z

← Older revision		Revision as of 15:56, 29 May 2026
Line 12:		Line 12:
	position: relative;		position: relative;
	overflow: hidden;		overflow: hidden;
	max-width: ~~1200px~~;		max-width: 700px;
	min-height: 75px;		min-height: 75px;
	padding: 10px 0;		padding: 10px 0;

imported>Swinbooru: experimental - increased max width to 1200px

2026-05-29T15:55:38Z

experimental - increased max width to 1200px

← Older revision		Revision as of 15:55, 29 May 2026
Line 12:		Line 12:
	position: relative;		position: relative;
	overflow: hidden;		overflow: hidden;
	max-width: ~~700px~~;		max-width: 1200px;
	min-height: 75px;		min-height: 75px;
	padding: 10px 0;		padding: 10px 0;

imported>SomebodyRum at 11:12, 19 May 2026

2026-05-19T11:12:15Z

@@ Line 98: / Line 98: @@
 /* --- 3-COLOR HORIZONTAL LAYOUT (GRID) --- */
 .tb-country-container.tb-preset-h.tb-3colors {
      padding: 0;
@@ Line 110: / Line 108: @@
      width: 100%;
      grid-template-columns: 100%;
-     grid-template-rows: 1fr 1fr 1fr; /* Strictly 1/3 each */
+     grid-template-rows: 1fr 1fr 1fr; /* Strict 33% slices */
+}
@@ Line 123: / Line 121: @@
 .tb-preset-h.tb-3colors .tb-country-text  { grid-row: 2; }
 .tb-preset-h.tb-3colors .tb-country-audio { grid-row: 3; }

imported>SomebodyRum at 11:09, 19 May 2026

2026-05-19T11:09:55Z

← Older revision		Revision as of 11:09, 19 May 2026
Line 98:		Line 98:

	/* --- 3-COLOR HORIZONTAL LAYOUT (GRID) --- */		/* --- 3-COLOR HORIZONTAL LAYOUT (GRID) --- */
	/* ~~Applies to standard (~~1~~:1:1) and Spanish ratio~~ (~~1:2:1~~) */
	.tb-country-container.tb-preset-h~~.tb-3colors,~~		/* 1. STANDARD 'h' PRESET (e.g., Russia) - Strict 33% / 33% / 33% */
	~~.tb-country-container.tb-preset-h-121~~.tb-3colors {		.tb-country-container.tb-preset-h.tb-3colors {
	padding: 0;		padding: 0;
	align-items: stretch;		align-items: stretch;
	min-height: ~~85px~~; ~~/* Back to a normal, compact minimum height */~~		min-height: 110px;
	}		}

	.tb-preset-h~~.tb-3colors .tb-country-content,~~		.tb-preset-h.tb-3colors .tb-country-content {
	~~.tb-preset-h-121~~.tb-3colors .tb-country-content {
	display: grid;		display: grid;
	width: 100%;		width: 100%;
	grid-template-columns: 100%;		grid-template-columns: 100%;
	/*		grid-template-rows: 1fr 1fr 1fr; /* Strictly 1/3 each */
	~~THE FIX: 'auto' forces the top and bottom rows to be EXACTLY the height~~
	~~of the title and audio player. They will not balloon.~~
	~~'1fr' gives the remaining middle space to the text.~~
	*/
	grid-template-rows: ~~auto~~ 1fr ~~auto~~;
	}		}

	.tb-preset-h.tb-3colors .tb-country-title,		.tb-preset-h.tb-3colors .tb-country-title,
	.tb-preset-h-~~121~~.tb-3colors .tb-country-~~title~~ {		.tb-preset-h.tb-3colors .tb-country-text,
	~~grid-row: 1;~~		.tb-preset-h.tb-3colors .tb-country-audio {
	align-self: ~~start~~;		align-self: center;
	justify-self: center;		justify-self: center;
	~~padding-top~~: ~~6px~~;		margin: 0;
	}		}
			.tb-preset-h.tb-3colors .tb-country-title { grid-row: 1; }
			.tb-preset-h.tb-3colors .tb-country-text { grid-row: 2; }
			.tb-preset-h.tb-3colors .tb-country-audio { grid-row: 3; }

	.tb-preset-h.tb-3colors ~~.tb~~-~~country~~-~~text,~~
	.tb-preset-h-121.tb-3colors .tb-country-~~text~~ {		/* 2. SPAIN 'h-121' PRESET - Strict 25% / 50% / 25% */
	grid~~-row: 2~~;		.tb-country-container.tb-preset-h-121.tb-3colors {
	~~align-self~~: ~~center~~;		padding: 0;
	~~justify~~-~~self~~: ~~center~~;		align-items: stretch;
	~~margin: 5px 0;~~ /* ~~Small breathing room in~~ the ~~middle~~ */		min-height: 110px;
			}

			.tb-preset-h-121.tb-3colors .tb-country-content {
			display: grid;
			width: 100%;
			grid-template-columns: 100%;
			/*
			minmax(0, Xfr) is the magic fix here. It forces the grid to strictly map to
			the 1:2:1 background gradient and prevents the bottom track from ballooning
			the rest of the banner just because the audio player is tall.
			*/
			grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
	}		}

	.tb-preset-h.tb-3colors .tb-country-~~audio~~,		.tb-preset-h-121.tb-3colors .tb-country-title,
			.tb-preset-h-121.tb-3colors .tb-country-text,
	.tb-preset-h-121.tb-3colors .tb-country-audio {		.tb-preset-h-121.tb-3colors .tb-country-audio {
	~~grid-row: 3;~~		align-self: center;
	align-self: ~~end~~;
	justify-self: center;		justify-self: center;
	margin~~-top~~: 0;		margin: 0;
	~~padding-bottom: 6px~~;
	}		}
			.tb-preset-h-121.tb-3colors .tb-country-title { grid-row: 1; }
			.tb-preset-h-121.tb-3colors .tb-country-text { grid-row: 2; }
			.tb-preset-h-121.tb-3colors .tb-country-audio { grid-row: 3; }

imported>SomebodyRum at 11:07, 19 May 2026

2026-05-19T11:07:23Z

← Older revision		Revision as of 11:07, 19 May 2026
Line 103:		Line 103:
	padding: 0;		padding: 0;
	align-items: stretch;		align-items: stretch;
	min-height: ~~110px~~;		min-height: 85px; /* Back to a normal, compact minimum height */
	}		}

Line 111:		Line 111:
	width: 100%;		width: 100%;
	grid-template-columns: 100%;		grid-template-columns: 100%;
			/*
			THE FIX: 'auto' forces the top and bottom rows to be EXACTLY the height
			of the title and audio player. They will not balloon.
			'1fr' gives the remaining middle space to the text.
			*/
			grid-template-rows: auto 1fr auto;
	}		}

	~~/* Grid Track Ratios */~~
	~~.tb-preset-h.tb-3colors .tb-country-content {~~
	~~grid-template-rows: 1fr 1fr 1fr; /* Equal 33% slices */~~
	}
	~~.tb-preset-h-121.tb-3colors .tb-country-content {~~
	~~grid-template-rows: 1fr 2fr 1fr; /* 25% / 50% / 25% slices (Double middle) */~~
	}

	~~/* Shared Grid Placement */~~
	.tb-preset-h.tb-3colors .tb-country-title,		.tb-preset-h.tb-3colors .tb-country-title,
	.tb-preset-h-121.tb-3colors .tb-country-title {		.tb-preset-h-121.tb-3colors .tb-country-title {
	grid-row: 1;		grid-row: 1;
	align-self: ~~center~~;		align-self: start;
	justify-self: center;		justify-self: center;
			padding-top: 6px;
	}		}

Line 134:		Line 132:
	align-self: center;		align-self: center;
	justify-self: center;		justify-self: center;
	margin~~-top~~: 0;		margin: 5px 0; /* Small breathing room in the middle */
	}		}

Line 140:		Line 138:
	.tb-preset-h-121.tb-3colors .tb-country-audio {		.tb-preset-h-121.tb-3colors .tb-country-audio {
	grid-row: 3;		grid-row: 3;
	align-self: ~~center~~;		align-self: end;
	justify-self: center;		justify-self: center;
	margin-top: 0;		margin-top: 0;
			padding-bottom: 6px;
	}		}

imported>SomebodyRum at 11:04, 19 May 2026

2026-05-19T11:04:21Z

← Older revision		Revision as of 11:04, 19 May 2026
Line 98:		Line 98:

	/* --- 3-COLOR HORIZONTAL LAYOUT (GRID) --- */		/* --- 3-COLOR HORIZONTAL LAYOUT (GRID) --- */
	/* ~~Stretches the container perfectly~~ to ~~divide content into 33% slices mapping to the gradient~~ */		/* Applies to standard (1:1:1) and Spanish ratio (1:2:1) */
	.tb-country-container.tb-preset-h.tb-3colors {		.tb-country-container.tb-preset-h.tb-3colors,
			.tb-country-container.tb-preset-h-121.tb-3colors {
	padding: 0;		padding: 0;
	align-items: stretch;		align-items: stretch;
	min-height: 110px; ~~/* Provides minimum vertical space for the audio player */~~		min-height: 110px;
	}		}

	.tb-preset-h.tb-3colors .tb-country-content {		.tb-preset-h.tb-3colors .tb-country-content,
			.tb-preset-h-121.tb-3colors .tb-country-content {
	display: grid;		display: grid;
	width: 100%;		width: 100%;
	~~grid-template-rows: 1fr 1fr 1fr;~~
	grid-template-columns: 100%;		grid-template-columns: 100%;
	}		}

	.tb-preset-h.tb-3colors .tb-country-title {		/* Grid Track Ratios */
			.tb-preset-h.tb-3colors .tb-country-content {
			grid-template-rows: 1fr 1fr 1fr; /* Equal 33% slices */
			}
			.tb-preset-h-121.tb-3colors .tb-country-content {
			grid-template-rows: 1fr 2fr 1fr; /* 25% / 50% / 25% slices (Double middle) */
			}

			/* Shared Grid Placement */
			.tb-preset-h.tb-3colors .tb-country-title,
			.tb-preset-h-121.tb-3colors .tb-country-title {
	grid-row: 1;		grid-row: 1;
	align-self: center;		align-self: center;
Line 118:		Line 129:
	}		}

	.tb-preset-h.tb-3colors .tb-country-text {		.tb-preset-h.tb-3colors .tb-country-text,
			.tb-preset-h-121.tb-3colors .tb-country-text {
	grid-row: 2;		grid-row: 2;
	align-self: center;		align-self: center;
Line 125:		Line 137:
	}		}

	.tb-preset-h.tb-3colors .tb-country-audio {		.tb-preset-h.tb-3colors .tb-country-audio,
			.tb-preset-h-121.tb-3colors .tb-country-audio {
	grid-row: 3;		grid-row: 3;
	align-self: center;		align-self: center;

imported>SomebodyRum: Undo revision 41373 by SomebodyRum (talk)

2026-05-19T11:03:19Z

Undo revision 41373 by SomebodyRum (talk)

@@ Line 1: / Line 1: @@
 /* --- 3-COLOR HORIZONTAL LAYOUT (GRID) --- */
-/* Applies to standard (1:1:1) and Spanish ratio (1:2:1) */
+/* Stretches the container perfectly to divide content into 33% slices mapping to the gradient */
-.tb-country-container.tb-preset-h.tb-3colors,
+.tb-country-container.tb-preset-h.tb-3colors {
      padding: 0;
      align-items: stretch;
-     min-height: 110px;
+     min-height: 110px; /* Provides minimum vertical space for the audio player */
+}
-.tb-preset-h.tb-3colors .tb-country-content,
+.tb-preset-h.tb-3colors .tb-country-content {
      display: grid;
      width: 100%;
      grid-template-columns: 100%;
+}
-/* Grid Track Ratios */
+.tb-preset-h.tb-3colors .tb-country-title {
      grid-row: 1;
      align-self: center;
@@ Line 31: / Line 118: @@
+}
-.tb-preset-h.tb-3colors .tb-country-text,
+.tb-preset-h.tb-3colors .tb-country-text {
      grid-row: 2;
      align-self: center;
@@ Line 39: / Line 125: @@
+}
-.tb-preset-h.tb-3colors .tb-country-audio,
+.tb-preset-h.tb-3colors .tb-country-audio {
      grid-row: 3;
      align-self: center;

imported>SomebodyRum at 11:02, 19 May 2026

2026-05-19T11:02:34Z

Show changes

imported>SomebodyRum at 10:58, 19 May 2026

2026-05-19T10:58:47Z

@@ Line 24: / Line 24: @@
 .tb-country-container p { display: contents; }
 .tb-country-audio {
      margin-top: 8px;
@@ Line 40: / Line 39: @@
      transform: translate(-50%, -50%);
      z-index: 1;
-     opacity: 0.25; /* Default fallback, can be overridden inline */
+     opacity: 0.25;
+}
 @keyframes tb-spin-anim {
      from { transform: translate(-50%, -50%) rotate(0deg); }
@@ Line 52: / Line 50: @@
+}
 @keyframes tb-pulse-anim {
 %, 100% { transform: translate(-50%, -50%) scale(1); }
@@ Line 60: / Line 57: @@
      animation: tb-pulse-anim 4s ease-in-out infinite;
+}
 /* --- SIDE IMAGES --- */
@@ Line 81: / Line 77: @@
      z-index: 3;
      color: #ffffff;
      text-shadow:
          -1px -1px 0 #000, 1px -1px 0 #000,
@@ Line 103: / Line 95: @@
      line-height: 1.2;
      margin-top: 4px;
+}

imported>SomebodyRum at 19:33, 15 May 2026

2026-05-15T19:33:54Z

← Older revision		Revision as of 19:33, 15 May 2026
Line 100:		Line 100:

	.tb-country-text {		.tb-country-text {
	font-size: 0.~~9em~~;		font-size: 0.95em;
	line-height: 1.2;		line-height: 1.2;
	margin-top: 4px;		margin-top: 4px;
	}		}