feat(core): ✨ use CSS variables for small font sizes

StarCitizenTools · Feb 26, 2024 · c9f665e · c9f665e
1 parent 3162e19
commit c9f665e
Show file tree

Hide file tree

Showing 48 changed files with 85 additions and 85 deletions.
diff --git a/resources/skins.citizen.preferences/skins.citizen.preferences.less b/resources/skins.citizen.preferences/skins.citizen.preferences.less
@@ -74,7 +74,7 @@
 		fieldset {
 			padding: 0 var( --space-md );
 			margin: 0;
-			font-size: 0.875rem;
+			font-size: var( --font-size-small );
 			appearance: none;
 			border: 0;
 		}
@@ -127,7 +127,7 @@
 		width: 100%;
 		padding: var( --space-sm ) var( --space-md );
 		font-family: inherit;
-		font-size: 0.875rem;
+		font-size: var( --font-size-small );
 		font-weight: var( --font-weight-medium );
 		color: #fff;
 		appearance: none;

diff --git a/resources/skins.citizen.search/skins.citizen.search.less b/resources/skins.citizen.search/skins.citizen.search.less
@@ -41,7 +41,7 @@
 			display: flex;
 			align-items: center;
 			overflow: hidden;
-			font-size: 0.875rem;
+			font-size: var( --font-size-small );
 			white-space: nowrap;
 			pointer-events: none;
 
@@ -105,7 +105,7 @@
 		}
 
 		&-sm {
-			font-size: 0.875rem;
+			font-size: var( --font-size-small );
 
 			.citizen-typeahead {
 				&__content {

diff --git a/resources/skins.citizen.styles/common/common.less b/resources/skins.citizen.styles/common/common.less
@@ -105,7 +105,7 @@ td {
 	align-items: center;
 	padding-left: 10px;
 	margin-left: 10px;
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 	border-left: 1px solid var( --border-color-base );
 }
 

diff --git a/resources/skins.citizen.styles/common/hacks.less b/resources/skins.citizen.styles/common/hacks.less
@@ -18,7 +18,7 @@ a.feedlink {
  * Revisit this when T254055 is resolved
  */
 .oo-ui-widget {
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 }
 
 // Replace 50em (50 * 0.875rem) with 50rem

diff --git a/resources/skins.citizen.styles/components/Drawer.less b/resources/skins.citizen.styles/components/Drawer.less
@@ -38,7 +38,7 @@
 		justify-content: center;
 		max-width: 92vw;
 		padding: var( --space-xs );
-		font-size: 0.875rem; // TODO: Make this a variable
+		font-size: var( --font-size-small ); // TODO: Make this a variable
 
 		.mw-list-item a {
 			border-radius: var( --border-radius--small );

diff --git a/resources/skins.citizen.styles/components/Footer.less b/resources/skins.citizen.styles/components/Footer.less
@@ -4,7 +4,7 @@
 	// Reserve space for header
 	margin-bottom: var( --header-size );
 	clear: both;
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 	color: var( --color-base--subtle );
 	background-color: var( --color-surface-2 );
 	direction: ltr;

diff --git a/resources/skins.citizen.styles/components/Pagetools.less b/resources/skins.citizen.styles/components/Pagetools.less
@@ -2,7 +2,7 @@
 	display: flex;
 	gap: var( --space-xxs );
 	margin-left: -0.75rem; // Align to the margin
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 	font-weight: var( --font-weight-medium );
 
 	// TODO: Merge this with header__item
@@ -46,7 +46,7 @@
 		padding: var( --space-xs ) 0;
 		margin: var( --space-xs );
 		overflow: auto;
-		font-size: 0.875rem;
+		font-size: var( --font-size-small );
 		.citizen-card;
 		.citizen-card-hide( top right );
 		.citizen-card-transition();
@@ -256,7 +256,7 @@
 		> .mw-portlet {
 			li > a {
 				gap: var( --space-xs );
-				font-size: 0.875rem;
+				font-size: var( --font-size-small );
 			}
 		}
 

diff --git a/resources/skins.citizen.styles/components/Search.less b/resources/skins.citizen.styles/components/Search.less
@@ -87,7 +87,7 @@
 	#searchInput {
 		flex-grow: 1;
 		padding: 0;
-		font-size: 0.875rem;
+		font-size: var( --font-size-small );
 		appearance: none;
 		background: transparent; // Cancel default background
 		border: 0; // Cancel default border

diff --git a/resources/skins.citizen.styles/components/TableOfContents.less b/resources/skins.citizen.styles/components/TableOfContents.less
@@ -1,5 +1,5 @@
 .citizen-toc {
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 	line-height: var( --line-height-xs );
 
 	&__card {

diff --git a/resources/skins.citizen.styles/components/Usermenu.less b/resources/skins.citizen.styles/components/Usermenu.less
@@ -1,6 +1,6 @@
 .citizen-userMenu {
 	&__card {
-		font-size: 0.875rem;
+		font-size: var( --font-size-small );
 		.citizen-header-card( right );
 	}
 

diff --git a/resources/skins.citizen.styles/skinning/content.tables.less b/resources/skins.citizen.styles/skinning/content.tables.less
@@ -43,7 +43,7 @@
 	}
 
 	td {
-		font-size: 0.875rem;
+		font-size: var( --font-size-small );
 	}
 
 	th,

diff --git a/resources/skins.citizen.styles/skinning/elements.less b/resources/skins.citizen.styles/skinning/elements.less
@@ -144,7 +144,7 @@ kbd,
 samp,
 .mw-code {
 	font-family: var( --font-family-monospace );
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 }
 
 pre,

diff --git a/resources/skins.citizen.styles/skinning/interface-edit-section-links.less b/resources/skins.citizen.styles/skinning/interface-edit-section-links.less
@@ -23,7 +23,7 @@
 
 	// Fallback text button if extensions register those
 	a {
-		font-size: 0.875rem;
+		font-size: var( --font-size-small );
 		border-radius: var( --border-radius--small );
 
 		&::before {

diff --git a/skinStyles/extensions/AJAXPoll/ext.ajaxpoll.less b/skinStyles/extensions/AJAXPoll/ext.ajaxpoll.less
@@ -25,7 +25,7 @@
 .ajaxpoll .ajaxpoll-answer-name,
 .ajaxpoll-answer-name-revoke {
 	margin-top: var( --space-xs );
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 }
 
 .ajaxpoll .ajaxpoll-hover-vote {

diff --git a/skinStyles/extensions/AdvancedSearch/ext.advancedSearch.styles.less b/skinStyles/extensions/AdvancedSearch/ext.advancedSearch.styles.less
@@ -17,7 +17,7 @@
 .mw-advancedSearch-searchPreview-label,
 .advancedsearch-namespacesPreview-label {
 	margin-right: var( --space-xs );
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 	font-weight: var( --font-weight-normal );
 	color: var( --color-base--subtle );
 	letter-spacing: 0.05em;
@@ -36,7 +36,7 @@
 	}
 
 	.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
-		font-size: 0.875rem;
+		font-size: var( --font-size-small );
 		font-weight: var( --font-weight-normal );
 		color: var( --color-base--subtle );
 		letter-spacing: 0.05em;

diff --git a/skinStyles/extensions/Capiunto/capiunto.infobox.main.less b/skinStyles/extensions/Capiunto/capiunto.infobox.main.less
@@ -14,7 +14,7 @@
 	float: none;
 	margin: 0 auto var( --space-md ) auto;
 	clear: none;
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 	color: var( --color-base );
 	background-color: var( --color-surface-2 );
 	border-color: var( --border-color-base );

diff --git a/skinStyles/extensions/Cargo/ext.cargo.datatables.less b/skinStyles/extensions/Cargo/ext.cargo.datatables.less
@@ -14,7 +14,7 @@
 table.dataTable {
 	max-width: 100%;
 	overflow: auto;
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 }
 
 table.dataTable thead th,
@@ -255,7 +255,7 @@ table.dataTable.no-footer {
 .dataTables_wrapper .dataTables_info,
 .dataTables_wrapper .dataTables_processing,
 .dataTables_wrapper .dataTables_paginate {
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 	color: var( --color-base );
 }
 

diff --git a/skinStyles/extensions/Cargo/ext.cargo.main.less b/skinStyles/extensions/Cargo/ext.cargo.main.less
@@ -29,7 +29,7 @@ table.cargoTable.mergeSimilarCells td.even {
 }
 
 table.cargoTable {
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 }
 
 table.cargoTable thead tr {

diff --git a/skinStyles/extensions/Cargo/ext.cargo.pagevalues.less b/skinStyles/extensions/Cargo/ext.cargo.pagevalues.less
@@ -18,7 +18,7 @@
 // Apply Citizen sticky header styles
 .cargo-pagevalues-tableinfo {
 	padding: var( --space-md ) 0;
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 	color: var( --color-base--subtle );
 	background-color: transparent;
 	.citizen-sticky-header;

diff --git a/skinStyles/extensions/CookieWarning/ext.CookieWarning.styles.less b/skinStyles/extensions/CookieWarning/ext.CookieWarning.styles.less
@@ -19,7 +19,7 @@
 	max-width: @max-width-breakpoint-tablet;
 	padding: var( --space-md );
 	margin: var( --space-xs );
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 	line-height: var( --line-height-sm );
 	background-color: var( --color-surface-1 );
 	border: 1px solid var( --border-color-base );

diff --git a/skinStyles/extensions/DiscussionTools/ext.discussionTools.init.styles.less b/skinStyles/extensions/DiscussionTools/ext.discussionTools.init.styles.less
@@ -50,7 +50,7 @@
 		display: block;
 		width: 1.875rem;
 		height: 1.875rem;
-		font-size: 0.875rem;
+		font-size: var( --font-size-small );
 		text-indent: -9999px; // Hide text
 		border-radius: var( --border-radius--small );
 		opacity: var( --opacity-icon-base );

diff --git a/skinStyles/extensions/Echo/ext.echo.special.less b/skinStyles/extensions/Echo/ext.echo.special.less
@@ -33,7 +33,7 @@
 		margin: 0;
 
 		&-primary {
-			font-size: 0.875rem;
+			font-size: var( --font-size-small );
 			// Align with Citizen label styles
 			color: var( --color-base--subtle );
 			letter-spacing: 0.05em;

diff --git a/skinStyles/extensions/MediaSearch/mediasearch.styles.less b/skinStyles/extensions/MediaSearch/mediasearch.styles.less
@@ -655,7 +655,7 @@
 
 	&__meta {
 		margin-top: var( --space-xxs );
-		font-size: 0.875rem;
+		font-size: var( --font-size-small );
 	}
 
 	&:hover &__title {
@@ -698,15 +698,15 @@
 /* AudioResult.less */
 .sdms-audio-result {
 	padding: var( --space-md ) 0;
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 	border-bottom: 0;
 
 	&__title + &__meta {
 		margin-top: var( --space-xxs );
 	}
 
 	&__meta {
-		font-size: 0.875rem;
+		font-size: var( --font-size-small );
 	}
 
 	p {
@@ -729,18 +729,18 @@
 /* PageResult.less */
 .sdms-page-result {
 	padding: var( --space-md ) 0;
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 	border-bottom: 0;
 
 	p {
-		font-size: 0.875rem;
+		font-size: var( --font-size-small );
 		color: var( --color-base--subtle );
 	}
 
 	// Sync with duration styles
 	&__namespace {
 		padding: var( --space-xxs ) var( --space-xs );
-		font-size: 0.875rem;
+		font-size: var( --font-size-small );
 		font-weight: var( --font-weight-medium );
 		color: var( --color-base );
 		background-color: var( --color-surface-2 );
@@ -805,7 +805,7 @@
 
 /* QuickView.less */
 .sdms-quick-view {
-	font-size: 0.875rem;
+	font-size: var( --font-size-small );
 
 	&__body {
 		.sd-icon {
@@ -903,7 +903,7 @@
 			border-radius: var( --border-radius--small );
 
 			@media screen and ( min-width: @min-width-breakpoint-tablet ) {
-				font-size: 0.875rem;
+				font-size: var( --font-size-small );
 			}
 
 			&:hover {
@@ -938,7 +938,7 @@
 		border-radius: var( --border-radius--small );
 
 		@media screen and ( min-width: @min-width-breakpoint-tablet ) {
-			font-size: 0.875rem;
+			font-size: var( --font-size-small );
 		}
 
 		&--selected {
@@ -967,14 +967,14 @@
 
 	.sdms-search-results-count {
 		@media screen and ( min-width: @min-width-breakpoint-tablet ) {
-			font-size: 0.875rem;
+			font-size: var( --font-size-small );
 		}
 	}
 
 	&__clear {
 		&--no-js {
 			@media screen and ( min-width: @min-width-breakpoint-tablet ) {
-				font-size: 0.875rem;
+				font-size: var( --font-size-small );
 			}
 		}
 	}

diff --git a/skinStyles/extensions/MsUpload/ext.MsUpload.less b/skinStyles/extensions/MsUpload/ext.MsUpload.less
@@ -25,7 +25,7 @@
 		height: 36px;
 		padding: 0;
 		margin: 8px;
-		font-size: 0.875rem;
+		font-size: var( --font-size-small );
 		font-weight: var( --font-weight-medium );
 		color: var( --color-base );
 		border-color: var( --border-color-base--darker );
@@ -91,7 +91,7 @@
 			align-items: center;
 			padding: 6px 12px;
 			margin-right: 0;
-			font-size: 0.875rem;
+			font-size: var( --font-size-small );
 
 			&:hover {
 				background-color: var( --background-color-quiet--hover );