wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-12-03 20:06:59 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-extensions-Echo/modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less

47 lines
1.1 KiB
Plaintext
Raw Normal View History

styles: Replace 'mediawiki.ui/variables' call with skin variables Replacing 'mediawiki.ui/variables.less' `@import` with new skin-aware 'mediawiki.skin.variables.less' standard. Also replacing and removing scattered WikimediaUI Base v0.15.0 variables with new skin variables. Also - replacing several static values with new Codex design tokens featuring skin variables for following properties: - background-color - color - border-width, border-style, border-color and border shorthand - border-radius - box-shadow colors - outline-width, outline-style, outline-color and outline shorthand - opacity - replacing equal-value Echo variables with new skin variables - replacing `opacity: 0` with `opacity: 1px solid transparent`, which improves accessibility in Windows High Contrast mode Bump required MediaWiki core version to >= v1.41.0. Bug: T332541 Co-Authored-by: Volker E. <volker.e@wikimedia.org> Depends-On: I04f9e48a1cf9dee915cf51e1e12b17ff0a595a06 Change-Id: If3863f07d7c3a8b58808fb03401c1060a92bc2ab
2023-04-03 19:44:38 +00:00
@import 'mediawiki.skin.variables.less';
hygiene: Make LESS imports non-ambigious Some LESS parsers will get confused with the lack of file extension. It's better to be explicit and in alignment with recent change in core I379334d7729e587a2a00. It was already weirdly mixed in this repo with some imports featuring extension and some not. Change-Id: Ib208607c850fa2492b13cd3d449c04ebc2c21a01
2019-10-25 20:53:39 +00:00
@import '../echo.variables.less';
Change mark as read buttons to circles Allow for mark read and mark unread through the side button, and change its style according to spec in the ticket. Bug: T126214 Change-Id: I78a93c0545bbe2d7c11a0c62557cd2e97e9d3866
2016-06-20 20:00:37 +00:00
.mw-echo-ui-toggleReadCircleButtonWidget {
&-circle {
styles: Replace 'mediawiki.ui/variables' call with skin variables Replacing 'mediawiki.ui/variables.less' `@import` with new skin-aware 'mediawiki.skin.variables.less' standard. Also replacing and removing scattered WikimediaUI Base v0.15.0 variables with new skin variables. Also - replacing several static values with new Codex design tokens featuring skin variables for following properties: - background-color - color - border-width, border-style, border-color and border shorthand - border-radius - box-shadow colors - outline-width, outline-style, outline-color and outline shorthand - opacity - replacing equal-value Echo variables with new skin variables - replacing `opacity: 0` with `opacity: 1px solid transparent`, which improves accessibility in Windows High Contrast mode Bump required MediaWiki core version to >= v1.41.0. Bug: T332541 Co-Authored-by: Volker E. <volker.e@wikimedia.org> Depends-On: I04f9e48a1cf9dee915cf51e1e12b17ff0a595a06 Change-Id: If3863f07d7c3a8b58808fb03401c1060a92bc2ab
2023-04-03 19:44:38 +00:00
border-radius: @border-radius-circle;
Replace deprecated Less `.box-sizing()` mixin with standard CSS Also remove 'mediawiki.mixins' includes where unused. Bug: T306488 Change-Id: Ia9a5a1ce1e47c1de2c2197885237f9355f9cc4f2
2022-04-20 04:59:30 +00:00
box-sizing: border-box;
ToggleReadCircleButtonWidget: Make circle perfectly round and align color Due to pixel rounding errors when relying on `em` as base size unit, the circle isn't always perfectly round and as a result /not/ a circle. Adding `min-width` and `min-height` ensures the intended layout similar to Ie61e7303e446 in OOjs UI's ToggleSwitchWidget. Also aligning `:hover` unread color to OOjs UI progressive button's `:hover`. Bug: T141504 Change-Id: Idf130947e8e61a68819e3ac9ba3cb1e105e65370
2016-10-03 18:55:17 +00:00
min-width: 10px;
Change mark as read buttons to circles Allow for mark read and mark unread through the side button, and change its style according to spec in the ticket. Bug: T126214 Change-Id: I78a93c0545bbe2d7c11a0c62557cd2e97e9d3866
2016-06-20 20:00:37 +00:00
width: @bundle-group-padding;
ToggleReadCircleButtonWidget: Make circle perfectly round and align color Due to pixel rounding errors when relying on `em` as base size unit, the circle isn't always perfectly round and as a result /not/ a circle. Adding `min-width` and `min-height` ensures the intended layout similar to Ie61e7303e446 in OOjs UI's ToggleSwitchWidget. Also aligning `:hover` unread color to OOjs UI progressive button's `:hover`. Bug: T141504 Change-Id: Idf130947e8e61a68819e3ac9ba3cb1e105e65370
2016-10-03 18:55:17 +00:00
min-height: 10px;
Change mark as read buttons to circles Allow for mark read and mark unread through the side button, and change its style according to spec in the ticket. Bug: T126214 Change-Id: I78a93c0545bbe2d7c11a0c62557cd2e97e9d3866
2016-06-20 20:00:37 +00:00
height: @bundle-group-padding;
margin: @bundle-group-padding;
// Mark as read
styles: Replace 'mediawiki.ui/variables' call with skin variables Replacing 'mediawiki.ui/variables.less' `@import` with new skin-aware 'mediawiki.skin.variables.less' standard. Also replacing and removing scattered WikimediaUI Base v0.15.0 variables with new skin variables. Also - replacing several static values with new Codex design tokens featuring skin variables for following properties: - background-color - color - border-width, border-style, border-color and border shorthand - border-radius - box-shadow colors - outline-width, outline-style, outline-color and outline shorthand - opacity - replacing equal-value Echo variables with new skin variables - replacing `opacity: 0` with `opacity: 1px solid transparent`, which improves accessibility in Windows High Contrast mode Bump required MediaWiki core version to >= v1.41.0. Bug: T332541 Co-Authored-by: Volker E. <volker.e@wikimedia.org> Depends-On: I04f9e48a1cf9dee915cf51e1e12b17ff0a595a06 Change-Id: If3863f07d7c3a8b58808fb03401c1060a92bc2ab
2023-04-03 19:44:38 +00:00
background-color: @background-color-progressive;
Change mark as read buttons to circles Allow for mark read and mark unread through the side button, and change its style according to spec in the ticket. Bug: T126214 Change-Id: I78a93c0545bbe2d7c11a0c62557cd2e97e9d3866
2016-06-20 20:00:37 +00:00
border: 0;
// Mark as unread
&-unread {
Use accessible colors on read status marker Using accessible colors on read status marker notifications. Bug: T139167 Change-Id: I2dc35d02abe2fccaf1f9d13d7672b2e432e7d1f0
2016-07-01 19:55:02 +00:00
background-color: #eaecf0;
styles: Replace 'mediawiki.ui/variables' call with skin variables Replacing 'mediawiki.ui/variables.less' `@import` with new skin-aware 'mediawiki.skin.variables.less' standard. Also replacing and removing scattered WikimediaUI Base v0.15.0 variables with new skin variables. Also - replacing several static values with new Codex design tokens featuring skin variables for following properties: - background-color - color - border-width, border-style, border-color and border shorthand - border-radius - box-shadow colors - outline-width, outline-style, outline-color and outline shorthand - opacity - replacing equal-value Echo variables with new skin variables - replacing `opacity: 0` with `opacity: 1px solid transparent`, which improves accessibility in Windows High Contrast mode Bump required MediaWiki core version to >= v1.41.0. Bug: T332541 Co-Authored-by: Volker E. <volker.e@wikimedia.org> Depends-On: I04f9e48a1cf9dee915cf51e1e12b17ff0a595a06 Change-Id: If3863f07d7c3a8b58808fb03401c1060a92bc2ab
2023-04-03 19:44:38 +00:00
border: @border-width-base @border-style-base @grey-light;
Change mark as read buttons to circles Allow for mark read and mark unread through the side button, and change its style according to spec in the ticket. Bug: T126214 Change-Id: I78a93c0545bbe2d7c11a0c62557cd2e97e9d3866
2016-06-20 20:00:37 +00:00
}
}
Fix 'unread' dot top padding regression All frameless buttons seemed to have recieved a generous padding-top in the latest OOUI release. This fix overrides that. Bug: T173059 Change-Id: Ia1f1bbc48410555163afabc84a199e7a69bb95dc
2017-08-21 18:21:39 +00:00
// Override OOUI specific rule for frameless buttons that adds a ~2.5em padding-top
&.oo-ui-widget.oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button {
padding-top: 0;
Make mark as read/unread buttons properly focusable Bug: T258710 Change-Id: I1ed9d386083d94bf6b5696bb71385169c0ccb807
2020-07-23 14:24:03 +00:00
// Remove padding for dummy icon
padding-left: 0;
Fix 'unread' dot top padding regression All frameless buttons seemed to have recieved a generous padding-top in the latest OOUI release. This fix overrides that. Bug: T173059 Change-Id: Ia1f1bbc48410555163afabc84a199e7a69bb95dc
2017-08-21 18:21:39 +00:00
}
Follow-up I1ed9d3860: Fix ToggleReadCircle in monobook Dummy icon is not position absolute in monobook, so hide it. Change-Id: I24edfbc1afcb81da8ef4db6bb685792ee56bc49a
2020-07-24 18:36:24 +00:00
&.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
// Hide dummy icon
display: none;
}
Change mark as read buttons to circles Allow for mark read and mark unread through the side button, and change its style according to spec in the ticket. Bug: T126214 Change-Id: I78a93c0545bbe2d7c11a0c62557cd2e97e9d3866
2016-06-20 20:00:37 +00:00
&:hover .mw-echo-ui-toggleReadCircleButtonWidget-circle {
// Mark as read
ToggleReadCircleButtonWidget: Make circle perfectly round and align color Due to pixel rounding errors when relying on `em` as base size unit, the circle isn't always perfectly round and as a result /not/ a circle. Adding `min-width` and `min-height` ensures the intended layout similar to Ie61e7303e446 in OOjs UI's ToggleSwitchWidget. Also aligning `:hover` unread color to OOjs UI progressive button's `:hover`. Bug: T141504 Change-Id: Idf130947e8e61a68819e3ac9ba3cb1e105e65370
2016-10-03 18:55:17 +00:00
background-color: #447ff5;
Change mark as read buttons to circles Allow for mark read and mark unread through the side button, and change its style according to spec in the ticket. Bug: T126214 Change-Id: I78a93c0545bbe2d7c11a0c62557cd2e97e9d3866
2016-06-20 20:00:37 +00:00
// Mark as unread
&-unread {
Use accessible colors on read status marker Using accessible colors on read status marker notifications. Bug: T139167 Change-Id: I2dc35d02abe2fccaf1f9d13d7672b2e432e7d1f0
2016-07-01 19:55:02 +00:00
background-color: #c8ccd1;
Change mark as read buttons to circles Allow for mark read and mark unread through the side button, and change its style according to spec in the ticket. Bug: T126214 Change-Id: I78a93c0545bbe2d7c11a0c62557cd2e97e9d3866
2016-06-20 20:00:37 +00:00
}
}
}
Reference in a new issue Copy permalink