wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-11-30 18:45:07 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-extensions-Echo/modules/echo.variables.less

36 lines
964 B
Plaintext
Raw Permalink 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
// = Echo variables
Enable dark mode for echo overlay Bug: T366322 Depends-on: I01cdde979b2ddf64d54013466a3fe51a493860cc Change-Id: I90f2c3c5098a418a7e40204c9b2384711b6ddce3
2024-06-20 17:34:36 +00:00
@grey-light: @color-placeholder;
Follow overhauled color palette Replacing colors with ones from the overhauled WCAG 2.0 level AA compliant color palette https://phabricator.wikimedia.org/M82 Applying Less variables where possible for better flexibility in future design maintenance. Also introducing some variables from WikimediaUI Base. Bug: T147365 Depends-on: I16bdfbdada252ee27d5a0de11e0930347315b699 Change-Id: Ic05ed15b44d86752c686d80efc4f2ed2a1e71b41
2016-10-25 04:18:08 +00:00
Split alerts and messages in Echo Split the notifications into 'alert' and 'message' badget with two different flyouts. Also clean up styling and module behavior. ** Depends on ooui change Id4bbe14ba0bf6c for footers in popups. ** Depends on ooui change Ie93e4d6ed5637c for fixing a bug in inverted icons. ** MobileFrontend must also be updated to support the new modules in this patch I168f485d6e54cb4067 In this change: * Split notifcations into alert and messages and display those in two different badges. * Create two separate flyout/popups for each category with their notifications. * Create a view-model to control notification state and emit events for both the popup and the badge to intercept and react to. * Clean up module load and distribution: * Create an ext.echo.ui module for javascript-ui support and ooui widgets. * Create an ext.echo.nojs module that unifies all base classes that are needed for both nojs and js support, that the js version builds upon. * Create a separate ext.echo.logger module as a singleton that can be called to perform all logging. * Clean up style uses * Move the special page LESS file into nojs module so all styles load properly even in nojs mode. * Transfer some of the styling from JS to LESS for consistency. * Make the 'read more' button load already with the styles it needs to look like a button, since its behavior is similar in nojs and js vesions, but before its classes were applied only by the js, making it inconsistent and also making its appearance 'jump' from a link to a button. * Delete and clean up all old and unused files. * Moved 'Help.png' icon from modules/overlay to modules/icons for later use. Bug: T108190 Change-Id: I55f440ed9f64c46817f620328a6bb522d44c9ca9
2015-08-13 00:54:16 +00:00
@badge-padding: 0.12em;
@badge-icon-size: 1.1em;
Redo the notification badges Bug: T115845 Bug: T140900 Depends-On: Ic666540d70de52f Change-Id: I34e2736490319989a3a251a43fbe8080ab960b00
2016-07-20 00:24:17 +00:00
@badge-distance-adjustment: 1em;
Split alerts and messages in Echo Split the notifications into 'alert' and 'message' badget with two different flyouts. Also clean up styling and module behavior. ** Depends on ooui change Id4bbe14ba0bf6c for footers in popups. ** Depends on ooui change Ie93e4d6ed5637c for fixing a bug in inverted icons. ** MobileFrontend must also be updated to support the new modules in this patch I168f485d6e54cb4067 In this change: * Split notifcations into alert and messages and display those in two different badges. * Create two separate flyout/popups for each category with their notifications. * Create a view-model to control notification state and emit events for both the popup and the badge to intercept and react to. * Clean up module load and distribution: * Create an ext.echo.ui module for javascript-ui support and ooui widgets. * Create an ext.echo.nojs module that unifies all base classes that are needed for both nojs and js support, that the js version builds upon. * Create a separate ext.echo.logger module as a singleton that can be called to perform all logging. * Clean up style uses * Move the special page LESS file into nojs module so all styles load properly even in nojs mode. * Transfer some of the styling from JS to LESS for consistency. * Make the 'read more' button load already with the styles it needs to look like a button, since its behavior is similar in nojs and js vesions, but before its classes were applied only by the js, making it inconsistent and also making its appearance 'jump' from a link to a button. * Delete and clean up all old and unused files. * Moved 'Help.png' icon from modules/overlay to modules/icons for later use. Bug: T108190 Change-Id: I55f440ed9f64c46817f620328a6bb522d44c9ca9
2015-08-13 00:54:16 +00:00
Enable dark mode for echo overlay Bug: T366322 Depends-on: I01cdde979b2ddf64d54013466a3fe51a493860cc Change-Id: I90f2c3c5098a418a7e40204c9b2384711b6ddce3
2024-06-20 17:34:36 +00:00
@notification-item-background-read: @background-color-neutral;
Better color to represent read notifications Replace color of read notification background in notifications list with Base 80, also slightly increase opacity of timestamp to be more visible. Bug: T78594 Change-Id: I93e26a9eb7e01a8b46bcac8b7ed72ddf06a63f30
2017-12-09 01:09:18 +00:00
Set Codex-token for @notification-background-unseen Bug: T370042 Change-Id: Ic91a853431a813aa77e8d7dcfadf863da56182c1
2024-09-02 15:31:47 +00:00
@notification-background-unseen: @background-color-progressive-subtle;
Follow overhauled color palette Replacing colors with ones from the overhauled WCAG 2.0 level AA compliant color palette https://phabricator.wikimedia.org/M82 Applying Less variables where possible for better flexibility in future design maintenance. Also introducing some variables from WikimediaUI Base. Bug: T147365 Depends-on: I16bdfbdada252ee27d5a0de11e0930347315b699 Change-Id: Ic05ed15b44d86752c686d80efc4f2ed2a1e71b41
2016-10-25 04:18:08 +00:00
@notification-background-unread: @background-color-base;
Enable dark mode for echo overlay Bug: T366322 Depends-on: I01cdde979b2ddf64d54013466a3fe51a493860cc Change-Id: I90f2c3c5098a418a7e40204c9b2384711b6ddce3
2024-06-20 17:34:36 +00:00
@notification-background-read: @background-color-neutral;
Align popup footer buttons to take 50% width each The alignment of the buttons was done haphazadly before, using padding. This should be done better; we should calculate the buttons width to be 50% of the width of the popup. Since the popup accepts a width config, we know what its value is, and can calculate the proper width. The width was added to the variables.less file for continued use. * Added popupWidth config variable to the badge widget * Added OO.ui.ButtonGroupWidget to place the buttons in for consistency and styling * Added calculated width styles to both footer buttons * Added corrections for MonoBook Change-Id: Iad2c947da06241e9303cf1f35574177a0f602bbb
2015-09-09 20:18:52 +00:00
Follow overhauled color palette Replacing colors with ones from the overhauled WCAG 2.0 level AA compliant color palette https://phabricator.wikimedia.org/M82 Applying Less variables where possible for better flexibility in future design maintenance. Also introducing some variables from WikimediaUI Base. Bug: T147365 Depends-on: I16bdfbdada252ee27d5a0de11e0930347315b699 Change-Id: Ic05ed15b44d86752c686d80efc4f2ed2a1e71b41
2016-10-25 04:18:08 +00:00
@badge-counter-background-seen: @grey-light;
Redo the notification badges Bug: T115845 Bug: T140900 Depends-On: Ic666540d70de52f Change-Id: I34e2736490319989a3a251a43fbe8080ab960b00
2016-07-20 00:24:17 +00:00
Follow overhauled color palette Replacing colors with ones from the overhauled WCAG 2.0 level AA compliant color palette https://phabricator.wikimedia.org/M82 Applying Less variables where possible for better flexibility in future design maintenance. Also introducing some variables from WikimediaUI Base. Bug: T147365 Depends-on: I16bdfbdada252ee27d5a0de11e0930347315b699 Change-Id: Ic05ed15b44d86752c686d80efc4f2ed2a1e71b41
2016-10-25 04:18:08 +00:00
@notification-body-color: @grey-light;
Make notification body text lighter Use #888 instead of #666 to match secondary link text (which is #000 with 50% opacity), both in the flyout and on the special page. Bonus: use LESS variables for these colors. Change-Id: Ifc1182a001e9b25f6ff7c213b6fcde3dc2f0acd2
2015-12-18 18:56:59 +00:00
Adjust group bundle styles Bug: T128069 Change-Id: If1e5d9811f4569e93ab9ba3064699ce6a6d907f7
2016-02-26 22:27:14 +00:00
@bundle-group-padding: 0.7em;
Add OOUI widgets for cross-wiki bundled notifications * Add the ability to use bundled expandable notification groups * Display bundled cross-wiki notifications following the design Bug: T115419 Bug: T115423 Bug: T115422 Change-Id: I8c3eba6d627c3f06d51d74fc9774e3fc2d02915d
2015-10-16 23:18:25 +00:00
Better color to represent read notifications Replace color of read notification background in notifications list with Base 80, also slightly increase opacity of timestamp to be more visible. Bug: T78594 Change-Id: I93e26a9eb7e01a8b46bcac8b7ed72ddf06a63f30
2017-12-09 01:09:18 +00:00
@opacity-low: 0.6;
Organize items in bundles with CSS table layout This will make the "flat" positioning of the bundle items a lot more consistent and organized. Bug: T121933 Bug: T123762 Change-Id: I472fcc89e540f1a886168069c547c6dc7e5ce613
2015-12-22 23:16:32 +00:00
@opacity-mid: 0.8;
build: Update stylelint-config-wikimedia to 0.17.2 Change-Id: Ide5b1395ea50e3d9fb15ca4690bce1cb9be90715
2024-06-13 14:51:06 +00:00
/* False positive for css-paged-media */
/* stylelint-disable plugin/no-unsupported-browser-features */
Styling changes to Special:Notifications headers and toolbar Bug: T136580 Bug: T136568 Change-Id: I1a7f08cca8884ada42eca50ba802b4d1e0b788e0
2016-05-31 00:37:52 +00:00
@specialpage-separation-unit: 0.7em;
Allow sidebar to be slightly smaller This reduces the sidebar to 15em using flexbox when required. This keeps the layout as columns just slightly longer, when compressing which especially on vector-2022 will happen quite a bit. This required making the lines in the optionwidget flex as well, so that the ellipsis doesn't depend on a fixed value any more. Bug: T337954 Change-Id: I8aadb1799da33161abc703344e9ab90bb747c604
2024-06-07 20:43:35 +00:00
@specialpage-sidebar-width: 15em;
Special:Notifications: Add additional wrapping Bug: T337954 Change-Id: Ia34e68eff3bcd52bd4ba0017bd5b8b271fd528c6
2024-05-29 21:27:56 +00:00
@specialpage-sidebar-max-width: 20em;
@specialpage-main-width: 20em;
Add a cross-wiki sidebar to the Special:Notifications page Add a sidebar with cross-wiki sources and pages of unread notifications. The filter allows the user to fetch notifications from a foreign source and specific pages if those exist. Bug: T129366 Change-Id: I57d827a47f80274d75364c2099a9624049a26834
2016-05-31 22:32:16 +00:00
Fix notification page width responsiveness issues Have the page hide the sidebar at 982px, when there is not enough room for both (and when vector switches down to SD). Make inbox responsive when resizing. Change-Id: I3daae156d1ebb0619090d466caa5138d0d98e937
2016-09-02 00:52:26 +00:00
@specialpage-hd-width: 982px;
Make Special:Notifications responsive As a first step for mobile support, make the page responsive, hide the sidebar, and slightly adjust button/title positions and sizes so they fit in a small screen. Bug: T140687 Change-Id: I98f264948a57924f6370a861381456ce9c82f8d8
2016-07-19 21:29:15 +00:00
Fix notification page width responsiveness issues Have the page hide the sidebar at 982px, when there is not enough room for both (and when vector switches down to SD). Make inbox responsive when resizing. Change-Id: I3daae156d1ebb0619090d466caa5138d0d98e937
2016-09-02 00:52:26 +00:00
@specialpage-width: 1000px;
build: Update stylelint-config-wikimedia to 0.17.2 Change-Id: Ide5b1395ea50e3d9fb15ca4690bce1cb9be90715
2024-06-13 14:51:06 +00:00
/* stylelint-enable plugin/no-unsupported-browser-features */
Set a fixed max-width to the Special:Notifications page This is to make sure that concatenation of text inside items works properly given CSS table-layout. Bug: T138433 Change-Id: Iae32cbf82cdb91880c7ccd7df14d167eb75527cf
2016-07-05 18:23:01 +00:00
Enable dark mode for echo overlay Bug: T366322 Depends-on: I01cdde979b2ddf64d54013466a3fe51a493860cc Change-Id: I90f2c3c5098a418a7e40204c9b2384711b6ddce3
2024-06-20 17:34:36 +00:00
@background-color-popup-confirmation: @color-notice;
Reference in a new issue Copy permalink