MediaWiki:Common.css - Revision history

Anthony at 10:12, 5 April 2026

2026-04-05T10:12:11Z

← Older revision		Revision as of 10:12, 5 April 2026
Line 744:		Line 744:

	/* =============================================================================		/* =============================================================================
	11. Page Forms — ~~consistent input styling~~ to match tag tokenizer ~~aesthetic~~		11. Page Forms — inputs styled to match tag tokenizer
	============================================================================= */		============================================================================= */

	.formtable input.createboxInput,		.formtable input.createboxInput,
	.formtable textarea.createboxInput {		.formtable textarea.createboxInput,
	background: var(--color-surface-~~0, Field~~);		.formtable select.createboxInput {
			background: var(--color-surface-1);
	border: 1px solid var(--border-color-base);		border: 1px solid var(--border-color-base);
	border-radius: ~~2px~~;		border-radius: 3px;
	padding: ~~3px 6px~~;		padding: 5px 8px;
	font-size: ~~1em~~;		min-height: 38px;
			font-size: 0.9em;
	color: var(--color-base);		color: var(--color-base);
	font-family: inherit;		font-family: inherit;
	box-sizing: border-box;		box-sizing: border-box;
	transition: border-color 0.15s~~, outline 0.15s~~;		transition: border-color 0.15s;
			vertical-align: middle;
	}		}

	.formtable input.createboxInput:focus,		.formtable input.createboxInput:focus,
	.formtable textarea.createboxInput:focus {		.formtable textarea.createboxInput:focus,
			.formtable select.createboxInput:focus {
	border-color: var(--wiki-primary);		border-color: var(--wiki-primary);
	outline: ~~1px solid var(--wiki-primary)~~;		outline: none;
	}		}

	.formtable ~~select~~.createboxInput {		.formtable textarea.createboxInput {
	~~background: var(--color-surface~~-~~0, Field);~~		min-height: unset;
	~~border~~: ~~1px solid var(--border-color-base);~~
	~~border-radius: 2px;~~
	~~padding: 3px 6px;~~
	~~font-size: 1em;~~
	~~color: var(--color-base);~~
	~~font-family: inherit;~~
	~~transition: border-color 0.15s;~~
	}

	~~.formtable select.createboxInput:focus {~~
	~~border-color: var(--wiki-primary);~~
	~~outline: 1px solid var(--wiki-primary)~~;
	}		}

Anthony at 10:03, 5 April 2026

2026-04-05T10:03:54Z

← Older revision		Revision as of 10:03, 5 April 2026
Line 651:		Line 651:

	.tag-tokenizer {		.tag-tokenizer {
	~~display: inline-block;~~
	position: relative;		position: relative;
	~~vertical-align~~: ~~middle~~;		width: 100%;
	}		}

	.tag-tokenizer-box {		.tag-tokenizer-box {
	display: ~~inline-~~flex;		display: flex;
	flex-wrap: wrap;		flex-wrap: wrap;
	align-items: center;		align-items: center;
	gap: ~~4px~~;		gap: 5px;
	min-height: ~~1.75em~~;		min-height: 38px;
	padding: ~~2px 4px~~;		padding: 5px 8px;
	background: var(--color-surface-~~0, Field~~);		background: var(--color-surface-1);
	border: 1px solid var(--border-color-base);		border: 1px solid var(--border-color-base);
	border-radius: ~~2px~~;		border-radius: 3px;
	cursor: text;		cursor: text;
	~~font~~-~~size: 1em~~;		transition: border-color 0.15s;
	box-sizing: border-box;		box-sizing: border-box;
	~~transition: border-color 0.15s;~~
	}		}

	.tag-tokenizer-box:focus-within {		.tag-tokenizer-box:focus-within {
	border-color: var(--wiki-primary);		border-color: var(--wiki-primary);
	~~outline: 1px solid var(--wiki-primary);~~
	}		}

Line 680:		Line 677:
	display: inline-flex;		display: inline-flex;
	align-items: center;		align-items: center;
	gap: ~~3px~~;		gap: 4px;
	padding: ~~1px 7px~~;		padding: 2px 8px;
	background: var(--wiki-primary-subtle);		background: var(--wiki-primary-subtle);
	border: 1px solid var(--wiki-primary);		border: 1px solid var(--wiki-primary);
Line 706:		Line 703:

	.tag-tokenizer-entry {		.tag-tokenizer-entry {
			flex: 1;
			min-width: 160px;
	border: none;		border: none;
	outline: none;		outline: none;
	background: transparent;		background: transparent;
	font-size: ~~1em~~;		font-size: 0.9em;
	color: var(--color-base);		color: var(--color-base);
	padding: ~~1px~~ 2px;		padding: 2px 4px;
	~~min-width: 8em;~~
	~~flex: 1~~;
	}		}

	.tag-tokenizer-dropdown {		.tag-tokenizer-dropdown {
	position: absolute;		position: absolute;
	top: calc(100% + ~~2px~~);		top: calc(100% + 3px);
	left: 0;		left: 0;
	~~min-width~~: ~~100%~~;		right: 0;
	background: var(--color-surface-1);		background: var(--color-surface-1);
	border: 1px solid var(--border-color-base);		border: 1px solid var(--border-color-base);
Line 734:		Line 731:

	.tag-tokenizer-dropdown li {		.tag-tokenizer-dropdown li {
	padding: ~~6px~~ 14px;		padding: 7px 14px;
	font-size: 0.88em;		font-size: 0.88em;
	color: var(--color-base);		color: var(--color-base);

Anthony at 10:02, 5 April 2026

2026-04-05T10:02:47Z

@@ Line 15: / Line 15: @@
 .  License Cloud
 . Tag Tokenizer
     ============================================================================= */
@@ Line 743: / Line 744: @@
      background: var(--wiki-primary-subtle);
      color: var(--wiki-primary);
+}

Anthony at 09:49, 5 April 2026

2026-04-05T09:49:47Z

← Older revision		Revision as of 09:49, 5 April 2026
Line 644:		Line 644:
	border-color: var(--wiki-secondary);		border-color: var(--wiki-secondary);
	}		}

	/* =============================================================================		/* =============================================================================
	10. Tag Tokenizer (Gadget-tagautocomplete.js)		10. Tag Tokenizer (Gadget-tagautocomplete.js)
Line 649:		Line 650:

	.tag-tokenizer {		.tag-tokenizer {
			display: inline-block;
	position: relative;		position: relative;
	~~width~~: ~~100%~~;		vertical-align: middle;
	}		}

	.tag-tokenizer-box {		.tag-tokenizer-box {
	display: flex;		display: inline-flex;
	flex-wrap: wrap;		flex-wrap: wrap;
	align-items: center;		align-items: center;
	gap: ~~5px~~;		gap: 4px;
	min-height: ~~38px~~;		min-height: 1.75em;
	padding: ~~5px 8px~~;		padding: 2px 4px;
	background: var(--color-surface-1);		background: var(--color-surface-0, Field);
	border: 1px solid var(--border-color-base);		border: 1px solid var(--border-color-base);
	border-radius: ~~3px~~;		border-radius: 2px;
	cursor: text;		cursor: text;
			font-size: 1em;
			box-sizing: border-box;
	transition: border-color 0.15s;		transition: border-color 0.15s;
	~~box-sizing: border-box;~~
	}		}

	.tag-tokenizer-box:focus-within {		.tag-tokenizer-box:focus-within {
	border-color: var(--wiki-primary);		border-color: var(--wiki-primary);
			outline: 1px solid var(--wiki-primary);
	}		}

Line 675:		Line 679:
	display: inline-flex;		display: inline-flex;
	align-items: center;		align-items: center;
	gap: ~~4px~~;		gap: 3px;
	padding: ~~2px 8px~~;		padding: 1px 7px;
	background: var(--wiki-primary-subtle);		background: var(--wiki-primary-subtle);
	border: 1px solid var(--wiki-primary);		border: 1px solid var(--wiki-primary);
Line 701:		Line 705:

	.tag-tokenizer-entry {		.tag-tokenizer-entry {
	~~flex: 1;~~
	~~min-width: 160px;~~
	border: none;		border: none;
	outline: none;		outline: none;
	background: transparent;		background: transparent;
	font-size: ~~0.9em~~;		font-size: 1em;
	color: var(--color-base);		color: var(--color-base);
	padding: 2px ~~4px~~;		padding: 1px 2px;
			min-width: 8em;
			flex: 1;
	}		}

	.tag-tokenizer-dropdown {		.tag-tokenizer-dropdown {
	position: absolute;		position: absolute;
	top: calc(100% + ~~3px~~);		top: calc(100% + 2px);
	left: 0;		left: 0;
	~~right~~: 0;		min-width: 100%;
	background: var(--color-surface-1);		background: var(--color-surface-1);
	border: 1px solid var(--border-color-base);		border: 1px solid var(--border-color-base);
Line 729:		Line 733:

	.tag-tokenizer-dropdown li {		.tag-tokenizer-dropdown li {
	padding: ~~7px~~ 14px;		padding: 6px 14px;
	font-size: 0.88em;		font-size: 0.88em;
	color: var(--color-base);		color: var(--color-base);

Anthony at 08:53, 5 April 2026

2026-04-05T08:53:04Z

@@ Line 14: / Line 14: @@
 .  Hub Main Page Buttons
 .  License Cloud
     ============================================================================= */
@@ Line 642: / Line 643: @@
      color: #fff;
      border-color: var(--wiki-secondary);
+}

Anthony at 00:49, 3 April 2026

2026-04-03T00:49:39Z

@@ Line 119: / Line 119: @@
 .badge-dark   { background: #3d3d3d; color: #fff; }
 /* =============================================================================
 . TABLE UTILITIES

Anthony at 23:03, 2 April 2026

2026-04-02T23:03:38Z

← Older revision		Revision as of 23:03, 2 April 2026
Line 411:		Line 411:
	.tutorial-hub-tagcloud {		.tutorial-hub-tagcloud {
	display: flex;		display: flex;
	flex-wrap: ~~wrap~~;		flex-wrap: nowrap;
			overflow-x: auto;
	gap: 6px;		gap: 6px;
	margin-bottom: 16px;		margin-bottom: 16px;
Line 418:		Line 419:
	border: 1px solid var(--border-color-base);		border: 1px solid var(--border-color-base);
	border-radius: 4px;		border-radius: 4px;
			scrollbar-width: thin;
			scrollbar-color: var(--border-color-base) transparent;
			-webkit-overflow-scrolling: touch;
			}

			.project-hub-tagcloud::-webkit-scrollbar,
			.tutorial-hub-tagcloud::-webkit-scrollbar {
			height: 3px;
			}

			.project-hub-tagcloud::-webkit-scrollbar-thumb,
			.tutorial-hub-tagcloud::-webkit-scrollbar-thumb {
			background: var(--border-color-base);
			border-radius: 2px;
	}		}

Line 424:		Line 439:
	.js-tutorial-tag {		.js-tutorial-tag {
	display: inline-block;		display: inline-block;
			flex-shrink: 0;
	padding: 3px 10px;		padding: 3px 10px;
	background: var(--wiki-primary-subtle);		background: var(--wiki-primary-subtle);

Anthony at 02:33, 2 April 2026

2026-04-02T02:33:19Z

@@ Line 537: / Line 537: @@
      opacity: 0.88;
      margin-top: 4px;
+}

Anthony at 01:29, 2 April 2026

2026-04-02T01:29:13Z

@@ Line 12: / Line 12: @@
 .  Category Pages
 .  Tag-Based Hub
     ============================================================================= */
@@ Line 487: / Line 489: @@
      color: var(--wiki-primary);
      background: var(--color-surface-1);
+}

Anthony: Added "7. Tag-Based Hub"

2026-04-02T00:10:47Z

Added "7. Tag-Based Hub"

Show changes