Template:CS button/styles.css - Revision history

Wikilah admin at 16:10, 16 October 2025

2025-10-16T16:10:56Z

← Older revision		Revision as of 00:10, 17 October 2025
Line 5:		Line 5:
	max-width:100%;		max-width:100%;
	box-sizing:border-box;		box-sizing:border-box;
	margin:~~1em~~ 0; /* added: space above and below */		margin:0.5em 0; /* added: space above and below */
	}		}

Wikilah admin at 11:08, 14 October 2025

2025-10-14T11:08:50Z

← Older revision		Revision as of 19:08, 14 October 2025
Line 14:		Line 14:
	padding:.2em 1.5em;		padding:.2em 1.5em;
	font: inherit; /* use CapSach site font */		font: inherit; /* use CapSach site font */
	font-weight:600; /* make text bold */
	color:#202122;		color:#202122;
	background-color:#FEE330;		background-color:#FEE330;

Wikilah admin at 05:24, 13 October 2025

2025-10-13T05:24:02Z

← Older revision		Revision as of 13:24, 13 October 2025
Line 1:		Line 1:
	/* The wrapper ~~defines~~ width; ~~the inner~~ link gets ~~the~~ button ~~skin~~ */		/* The wrapper controls width; child link gets button styling */
			.capsach-btn {
	.capsach-btn { display:inline-block; width:278px; max-width:100%; box-sizing:border-box; }
			display:inline-block;
			width:278px;
			max-width:100%;
			box-sizing:border-box;
			margin:1em 0; /* added: space above and below */
			}

	/* Button ~~look~~ on ~~the~~ inner anchor/span */		/* Button appearance on inner anchor/span */
	.capsach-btn > a,		.capsach-btn > a,
	.capsach-btn > .capsach-btn__inner {		.capsach-btn > .capsach-btn__inner {
	display:block;		display:block;
	padding:.2em 1.5em;		padding:.2em 1.5em;
	font: inherit; /* ~~inherit~~ site font ~~& size~~ */		font: inherit; /* use CapSach site font */
	font-weight:600; /* make text bold */		font-weight:600; /* make text bold */
	color:#202122;		color:#202122;
Line 21:		Line 27:

	.capsach-btn > a:hover,		.capsach-btn > a:hover,
	.capsach-btn > .capsach-btn__inner:hover { ~~background-color:#FFDD00; }~~		.capsach-btn > .capsach-btn__inner:hover {
			background-color:#FFDD00;
			}

	.capsach-btn > a:active,		.capsach-btn > a:active,
	.capsach-btn > .capsach-btn__inner:active { ~~background-color:#F0C800; transform:translateY(1px); }~~		.capsach-btn > .capsach-btn__inner:active {
			background-color:#F0C800;
			transform:translateY(1px);
			}

	/* Mobile-only full width (opt-in ~~via \|mobile=full~~) */		/* Mobile-only full width (opt-in) */
	@media (max-width:720px){		@media (max-width:720px){
	.capsach-btn--mobile { display:block; width:100% !important; }		.capsach-btn--mobile { display:block; width:100% !important; }
	}		}

	/* alignment helpers ~~unchanged~~ */		/* alignment helpers */
	.capsach-align { text-align:left; }		.capsach-align { text-align:left; }
	.capsach-align-right { text-align:right; }		.capsach-align-right { text-align:right; }

Wikilah admin at 05:03, 13 October 2025

2025-10-13T05:03:04Z

← Older revision		Revision as of 13:03, 13 October 2025
Line 8:		Line 8:
	padding:.2em 1.5em;		padding:.2em 1.5em;
	font: inherit; /* inherit site font & size */		font: inherit; /* inherit site font & size */
			font-weight:600; /* make text bold */
	color:#202122;		color:#202122;
	background-color:#FEE330;		background-color:#FEE330;

Wikilah admin at 05:01, 13 October 2025

2025-10-13T05:01:48Z

← Older revision		Revision as of 13:01, 13 October 2025
Line 1:		Line 1:
	/* ~~Container~~ ~~controls~~ width; ~~child~~ link gets the button skin */		/* The wrapper defines width; the inner link gets the button skin */
			.capsach-btn { display:inline-block; width:278px; max-width:100%; box-sizing:border-box; }
	.capsach-btn {
	display:inline-block;
	width:278px; /* default; override via \|width= */
	max-width:100%;
	box-sizing:border-box;
	}

	/* ~~Make~~ the inner anchor ~~look~~/~~behave like a button~~ */		/* Button look on the inner anchor/span */
	.capsach-btn > a,		.capsach-btn > a,
	.capsach-btn > .capsach-btn__inner {		.capsach-btn > .capsach-btn__inner {
	display:block;		display:block;
	padding:.2em 1.5em;		padding:.2em 1.5em;
			font: inherit; /* inherit site font & size */
	font-weight:600;
	color:#202122;		color:#202122;
	background-color:#FEE330; ~~/* flat color */~~		background-color:#FEE330;
	text-decoration:none;		text-decoration:none;
	border:none;		border:none;
	border-radius:9999px; ~~/* pill */~~		border-radius:9999px;
	text-align:center;		text-align:center;
	white-space:nowrap;		white-space:nowrap;
Line 23:		Line 18:
	cursor:pointer;		cursor:pointer;
	}		}

	/* Link states */
	.capsach-btn > a:link,
	.capsach-btn > a:visited { color:#202122; text-decoration:none; }

	.capsach-btn > a:hover,		.capsach-btn > a:hover,
Line 33:		Line 24:
	.capsach-btn > a:active,		.capsach-btn > a:active,
	.capsach-btn > .capsach-btn__inner:active { background-color:#F0C800; transform:translateY(1px); }		.capsach-btn > .capsach-btn__inner:active { background-color:#F0C800; transform:translateY(1px); }

	/* Optional: external link icon suppression if your skin adds one
	.capsach-btn > a.external { background-image:none !important; padding-right:1.5em; }
	*/

	/* Mobile-only full width (opt-in via \|mobile=full) */		/* Mobile-only full width (opt-in via \|mobile=full) */
Line 43:		Line 30:
	}		}

	/* ~~your~~ alignment helpers */		/* alignment helpers unchanged */
	.capsach-align { text-align:left; } ~~/* default */~~		.capsach-align { text-align:left; }
	.capsach-align-right { text-align:right; }		.capsach-align-right { text-align:right; }
	.capsach-align-center { text-align:center; }		.capsach-align-center { text-align:center; }

Wikilah admin at 04:36, 13 October 2025

2025-10-13T04:36:58Z

← Older revision		Revision as of 12:36, 13 October 2025
Line 1:		Line 1:
			/* Container controls width; child link gets the button skin */
	.capsach-btn {		.capsach-btn {
	display:inline-block;		display:inline-block;
	width:278px; /* default; override via \|width= */		width:278px; /* default; override via \|width= */
	max-width:100%;		max-width:100%;
		⚫	box-sizing:border-box;
			}

			/* Make the inner anchor look/behave like a button */
			.capsach-btn > a,
			.capsach-btn > .capsach-btn__inner {
			display:block;
	padding:.2em 1.5em;		padding:.2em 1.5em;
	font-weight:600;		font-weight:600;
	color:#202122;		color:#202122;
	background-color:#FEE330; /* flat color */		background-color:#FEE330; /* flat color */
	~~background~~-~~image~~:none;		text-decoration:none;
	border:none;		border:none;
	border-radius:9999px; /* pill */		border-radius:9999px; /* pill */
	text-decoration:none; /* remove underline on <a> */
⚫	box-sizing:border-box;
	text-align:center;		text-align:center;
	white-space:nowrap;		white-space:nowrap;
Line 18:		Line 24:
	}		}

			/* Link states */
	/* ensure anchors keep the button text color */
	a.capsach-btn:link,		.capsach-btn > a:link,
	a.capsach-btn:visited { color:#202122; text-decoration:none; }		.capsach-btn > a:visited { color:#202122; text-decoration:none; }

			.capsach-btn > a:hover,
		⚫	.capsach-btn > .capsach-btn__inner:hover { background-color:#FFDD00; }

			.capsach-btn > a:active,
			.capsach-btn > .capsach-btn__inner:active { background-color:#F0C800; transform:translateY(1px); }

			/* Optional: external link icon suppression if your skin adds one
⚫	.capsach-btn:hover { background-color:#FFDD00; }
	.capsach-btn~~:active~~ { background-~~color~~:~~#F0C800~~; ~~transform~~:~~translateY(1px)~~; }		.capsach-btn > a.external { background-image:none !important; padding-right:1.5em; }
			*/

	/* Mobile-only full-width (opt-in) */		/* Mobile-only full width (opt-in via \|mobile=full) */
	@media (max-width:720px){		@media (max-width:720px){
	.capsach-btn--mobile { display:block; width:100% !important; }		.capsach-btn--mobile { display:block; width:100% !important; }
	}		}

			/* your alignment helpers */
	.capsach-align { text-align:left; } /* default */		.capsach-align { text-align:left; } /* default */
	.capsach-align-right { text-align:right; }		.capsach-align-right { text-align:right; }

Wikilah admin at 04:10, 13 October 2025

2025-10-13T04:10:40Z

← Older revision		Revision as of 12:10, 13 October 2025
Line 10:		Line 10:
	border:none;		border:none;
	border-radius:9999px; /* pill */		border-radius:9999px; /* pill */
	text-decoration:none; /* ~~kill~~ underline on ~~links~~ */		text-decoration:none; /* remove underline on <a> */
	box-sizing:border-box;		box-sizing:border-box;
	text-align:center;		text-align:center;
Line 17:		Line 17:
	cursor:pointer;		cursor:pointer;
	}		}

⚫	.capsach-btn:link,
			/* ensure anchors keep the button text color */
⚫	.capsach-btn:visited { color:#202122; text-decoration:none; }
		⚫	a.capsach-btn:link,
		⚫	a.capsach-btn:visited { color:#202122; text-decoration:none; }

	.capsach-btn:hover { background-color:#FFDD00; }		.capsach-btn:hover { background-color:#FFDD00; }
	.capsach-btn:active { background-color:#F0C800; transform:translateY(1px); }		.capsach-btn:active { background-color:#F0C800; transform:translateY(1px); }

	/* Mobile-only full-width (opt-in ~~via \|mobile=full~~) */		/* Mobile-only full-width (opt-in) */
	@media (max-width:720px){		@media (max-width:720px){
	.capsach-btn--mobile { display:block; width:100% !important; }		.capsach-btn--mobile { display:block; width:100% !important; }

Wikilah admin at 03:09, 13 October 2025

2025-10-13T03:09:09Z

← Older revision		Revision as of 11:09, 13 October 2025
Line 1:		Line 1:
	.capsach-btn {		.capsach-btn {
	display:inline-block;		display:inline-block;
	width:278px; /* default ~~width~~; ~~can be overridden~~ via \|width= */		width:278px; /* default; override via \|width= */
	max-width:100%; ~~/* avoids overflow in tight containers */~~		max-width:100%;
	padding:.2em 1.5em;		padding:.2em 1.5em;
	font-weight:600;		font-weight:600;
	color:#202122;		color:#202122;
	background-color:#FEE330; /* flat color */		background-color:#FEE330; /* flat color */
	background-image:none; ~~/* ensure no gradient */~~		background-image:none;
	border:none; ~~/* remove border */~~		border:none;
	border-radius:9999px; /* ~~round (~~pill~~) corners~~ */		border-radius:9999px; /* pill */
			text-decoration:none; /* kill underline on links */
	box-sizing:border-box;		box-sizing:border-box;
	text-align:center;		text-align:center;
	white-space:nowrap;		white-space:nowrap;
	transition:background-color .15s, transform .05s;		transition:background-color .15s, transform .05s;
			cursor:pointer;
	}		}
			.capsach-btn:link,
			.capsach-btn:visited { color:#202122; text-decoration:none; }

	.capsach-btn:hover { background-color:#FFDD00; }		.capsach-btn:hover { background-color:#FFDD00; }
	.capsach-btn:active { background-color:#F0C800; transform:translateY(1px); }		.capsach-btn:active { background-color:#F0C800; transform:translateY(1px); }

	/* Mobile-only full-width ~~variant~~ (opt-in via ~~class~~) */		/* Mobile-only full-width (opt-in via \|mobile=full) */
	@media (max-width:720px){		@media (max-width:720px){
	.capsach-btn--mobile { display:block; width:100% !important; }		.capsach-btn--mobile { display:block; width:100% !important; }

Wikilah admin at 02:56, 13 October 2025

2025-10-13T02:56:23Z

← Older revision		Revision as of 10:56, 13 October 2025
Line 1:		Line 1:
	.capsach-btn {		.capsach-btn {
	display:inline-block;		display:inline-block;
	width:278px; /* default width; can be overridden ~~inline~~ */		width:278px; /* default width; can be overridden via \|width= */
			max-width:100%; /* avoids overflow in tight containers */
	padding:.2em 1.5em;		padding:.2em 1.5em;
	font-weight:600;		font-weight:600;
Line 16:		Line 17:
	.capsach-btn:hover { background-color:#FFDD00; }		.capsach-btn:hover { background-color:#FFDD00; }
	.capsach-btn:active { background-color:#F0C800; transform:translateY(1px); }		.capsach-btn:active { background-color:#F0C800; transform:translateY(1px); }

			/* Mobile-only full-width variant (opt-in via class) */
			@media (max-width:720px){
			.capsach-btn--mobile { display:block; width:100% !important; }
			}

	.capsach-align { text-align:left; } /* default */		.capsach-align { text-align:left; } /* default */

Wikilah admin at 02:38, 13 October 2025

2025-10-13T02:38:39Z

← Older revision		Revision as of 10:38, 13 October 2025
Line 5:		Line 5:
	font-weight:600;		font-weight:600;
	color:#202122;		color:#202122;
	background-color:#FEE330;		background-color:#FEE330; /* flat color */
			background-image:none; /* ensure no gradient */
	border:1px solid;
			border:none; /* remove border */
	border-color:#a2a9b1 #72777d #72777d #a2a9b1;
			border-radius:9999px; /* round (pill) corners */
	box-sizing:border-box;		box-sizing:border-box;
	text-align:center;		text-align:center;
	white-space:nowrap;		white-space:nowrap;
	transition:background~~-color .15s, border~~-color .15s, transform .05s;		transition:background-color .15s, transform .05s;
	}		}
	.capsach-btn:hover { background-color:#FFDD00~~; border-color:#a2a9b1 #72777d #72777d #a2a9b1~~; }		.capsach-btn:hover { background-color:#FFDD00; }
	.capsach-btn:active { background-color:#F0C800~~; border-color:#a2a9b1 #72777d #72777d #a2a9b1~~; transform:translateY(1px); }		.capsach-btn:active { background-color:#F0C800; transform:translateY(1px); }

	.capsach-align { text-align:left; } /* default */		.capsach-align { text-align:left; } /* default */