mediawiki-skins-Citizen/skinStyles/extensions/Echo/ext.echo.styles.badge.less

/*
 * Citizen
 *
 * SkinStyles for Extension:Echo
 * Module: ext.echo.styles.badge
 * Version: REL1_39
 *
 * Date: 2024-05-06
*/

.mw-echo-notifications-badge {
	#pt-notifications-alert &,
	#pt-notifications-notice & {
		top: 0;
		width: var( --header-button-size );
		height: var( --header-button-size );
		margin: 0;
		background-color: transparent; // reset mw-list-item style from Citizen
		filter: var( --filter-invert );
		background-repeat: no-repeat;
		background-position: center;
		background-size: var( --header-icon-size );
		border-radius: var( --border-radius--small );
		opacity: var( --opacity-icon-base );

		&:hover {
			opacity: var( --opacity-icon-base--hover );
		}

		&:active {
			opacity: var( --opacity-icon-base--selected );
		}

		&:focus {
			box-shadow: 0 0 0 1px var( --color-inverted-fixed ), 0 0 0 3px var( --color-progressive );
			opacity: var( --opacity-icon-base--selected );

			&::after {
				border-color: var( --color-progressive );
			}
		}

		&::after {
			top: 0;
			font-size: 0.65rem;
			background-color: var( --color-destructive );
			// Re-invert indicator color
			filter: var( --filter-invert );
			border-color: var( --color-destructive );
			border-radius: var( --border-radius--pill );
		}

		&-dimmed {
			opacity: var( --opacity-icon-base--disabled );
		}

		&.mw-echo-notifications-badge-all-read {
			opacity: var( --opacity-icon-base );

			&:hover {
				opacity: var( --opacity-icon-base--hover );
			}

			&:active {
				opacity: var( --opacity-icon-base--selected );
			}
		}
	}

	&.oo-ui-flaggedElement-unseen,
	&.mw-echo-unseen-notifications {
		#pt-notifications-alert &::after {
			background-color: var( --color-destructive );
		}

		#pt-notifications-notice &::after {
			background-color: var( --color-destructive );
		}
	}
}

// Add quiet background hover states
#pt-notifications-alert,
#pt-notifications-notice {
	border-radius: var( --border-radius--small );

	&:hover {
		background-color: var( --background-color-quiet--hover );
	}

	&:active {
		background-color: var( --background-color-quiet--active );
	}
}
Attempt to clean file tree 2019-12-29 18:45:17 +00:00			`/*`
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`* Citizen`
			`*`
			`* SkinStyles for Extension:Echo`
			`* Module: ext.echo.styles.badge`
fix(Echo): 🐛 re-implement nojs Echo buttons 2024-05-06 19:28:56 +00:00			`* Version: REL1_39`
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`*`
fix(Echo): 🐛 re-implement nojs Echo buttons 2024-05-06 19:28:56 +00:00			`* Date: 2024-05-06`
Attempt to clean file tree 2019-12-29 18:45:17 +00:00			`*/`

feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`.mw-echo-notifications-badge {`
			`#pt-notifications-alert &,`
			`#pt-notifications-notice & {`
fix: align Echo badges positions and tweaks 2021-08-11 20:40:16 +00:00			`top: 0;`
feat(core): redesign site header (#521) Change header into vertical header for large screen and bottom header for small screen. 2022-09-29 23:12:56 +00:00			`width: var( --header-button-size );`
			`height: var( --header-button-size );`
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`margin: 0;`
fix(Echo): 🐛 incorrect button hover color 2023-07-10 20:34:14 +00:00			`background-color: transparent; // reset mw-list-item style from Citizen`
style: 🎨 apply recess order to styles 2023-07-28 01:19:27 +00:00			`filter: var( --filter-invert );`
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`background-repeat: no-repeat;`
style: 🎨 apply recess order to styles 2023-07-28 01:19:27 +00:00			`background-position: center;`
feat(core): redesign site header (#521) Change header into vertical header for large screen and bottom header for small screen. 2022-09-29 23:12:56 +00:00			`background-size: var( --header-icon-size );`
style: 🎨 apply recess order to styles 2023-07-28 01:19:27 +00:00			`border-radius: var( --border-radius--small );`
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`opacity: var( --opacity-icon-base );`
Attempt to clean file tree 2019-12-29 18:45:17 +00:00
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`&:hover {`
			`opacity: var( --opacity-icon-base--hover );`
			`}`
feat: update Echo badges styles to be inline with other header icons 2021-05-10 16:11:47 +00:00
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`&:active {`
feat(core): ✨ convert some CSS variables into Codex equivalent This is an on-going work to adapt Codex into Citizen. Some of the CSS variables are soft depreciated, see tokens.less for updated info. 2024-06-30 05:04:30 +00:00			`opacity: var( --opacity-icon-base--selected );`
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`}`

			`&:focus {`
feat(core): ✨ convert some CSS variables into Codex equivalent This is an on-going work to adapt Codex into Citizen. Some of the CSS variables are soft depreciated, see tokens.less for updated info. 2024-06-30 05:04:30 +00:00			`box-shadow: 0 0 0 1px var( --color-inverted-fixed ), 0 0 0 3px var( --color-progressive );`
			`opacity: var( --opacity-icon-base--selected );`
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00
ci: 👷 lint code to MediaWiki standards Check commit and GitHub actions for more details 2023-02-28 21:59:36 +00:00			`&::after {`
feat(core): ✨ convert some CSS variables into Codex equivalent This is an on-going work to adapt Codex into Citizen. Some of the CSS variables are soft depreciated, see tokens.less for updated info. 2024-06-30 05:04:30 +00:00			`border-color: var( --color-progressive );`
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`}`
			`}`

ci: 👷 lint code to MediaWiki standards Check commit and GitHub actions for more details 2023-02-28 21:59:36 +00:00			`&::after {`
fix: fix hidden Echo badges 2021-01-13 17:21:01 +00:00			`top: 0;`
style: 🎨 apply recess order to styles 2023-07-28 01:19:27 +00:00			`font-size: 0.65rem;`
ci: lint code to MediaWiki standards Check commit and GitHub actions for more details 2022-09-28 21:02:56 +00:00			`background-color: var( --color-destructive );`
feat(core): ✨ use filter-invert CSS variable to flip color This decouple the filter style from the class. Instead, filter-invert can be redefined if needed (e.g. :root.skin-citizen-dark) 2023-07-10 20:56:56 +00:00			`// Re-invert indicator color`
			`filter: var( --filter-invert );`
style: 🎨 apply recess order to styles 2023-07-28 01:19:27 +00:00			`border-color: var( --color-destructive );`
			`border-radius: var( --border-radius--pill );`
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`}`

			`&-dimmed {`
			`opacity: var( --opacity-icon-base--disabled );`
			`}`

			`&.mw-echo-notifications-badge-all-read {`
feat: convert Echo badges to use opacity var instead 2021-01-15 19:27:39 +00:00			`opacity: var( --opacity-icon-base );`
Attempt to clean file tree 2019-12-29 18:45:17 +00:00
feat: convert Echo badges to use opacity var instead 2021-01-15 19:27:39 +00:00			`&:hover {`
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`opacity: var( --opacity-icon-base--hover );`
feat: convert Echo badges to use opacity var instead 2021-01-15 19:27:39 +00:00			`}`

Attempt to clean file tree 2019-12-29 18:45:17 +00:00			`&:active {`
feat(core): ✨ convert some CSS variables into Codex equivalent This is an on-going work to adapt Codex into Citizen. Some of the CSS variables are soft depreciated, see tokens.less for updated info. 2024-06-30 05:04:30 +00:00			`opacity: var( --opacity-icon-base--selected );`
Attempt to clean file tree 2019-12-29 18:45:17 +00:00			`}`
			`}`
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`}`
feat: update Echo badges styles to be inline with other header icons 2021-05-10 16:11:47 +00:00
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`&.oo-ui-flaggedElement-unseen,`
			`&.mw-echo-unseen-notifications {`
ci: 👷 lint code to MediaWiki standards Check commit and GitHub actions for more details 2023-02-28 21:59:36 +00:00			`#pt-notifications-alert &::after {`
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`background-color: var( --color-destructive );`
feat: update Echo badges styles to be inline with other header icons 2021-05-10 16:11:47 +00:00			`}`
Attempt to clean file tree 2019-12-29 18:45:17 +00:00
ci: 👷 lint code to MediaWiki standards Check commit and GitHub actions for more details 2023-02-28 21:59:36 +00:00			`#pt-notifications-notice &::after {`
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`background-color: var( --color-destructive );`
Attempt to clean file tree 2019-12-29 18:45:17 +00:00			`}`
			`}`
			`}`
Move Echo dark styles to echo skinstyles 2020-06-12 05:59:04 +00:00
feat: update Echo skinStyles to grade A 2021-08-11 20:17:43 +00:00			`// Add quiet background hover states`
			`#pt-notifications-alert,`
			`#pt-notifications-notice {`
			`border-radius: var( --border-radius--small );`

			`&:hover {`
			`background-color: var( --background-color-quiet--hover );`
			`}`

			`&:active {`
			`background-color: var( --background-color-quiet--active );`
Move Echo dark styles to echo skinstyles 2020-06-12 05:59:04 +00:00			`}`
			`}`