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

54 lines
1.3 KiB
Plaintext
Raw Normal View History

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
// Taken from WikimediaUI base v0.6.1
// Background Colors
@background-color-base: #fff;
// Foreground Colors
@color-base: #222;
@color-base-active: #000;
@color-base-emphasized: @color-base-active;
// Primary 'Progressive' Color, Background Color
@background-color-primary: #eaf3ff;
@color-primary: #36c;
// 'Destructive' Color
Update Red50 'destructive' color 'Destructive' color was updated in WikimediaUI color palette to ensure WCAG 2.0 level AA conformance with both, white and black. Due to WikimediaUI Base not in central place we still have to care about this manually. Change-Id: I7402ef64b1aa28c2cffeb9bca2804b1dfbecec42
2017-08-16 18:27:30 +00:00
@color-destructive: #d33;
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
// Border Colors
@border-color-heading: #c8ccd1;
// Echo's original variables
@grey-light: #72777d;
@grey-medium: #54595d;
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;
Make the invisible text in badges really invisible Bug: T161302 Change-Id: I5c7a5bcb7a096b69c28651c6fe1e4017654997ad
2017-03-28 16:20:23 +00:00
@badge-offscreen-offset: 1000px;
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
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
@notification-item-background-read: #eaecf0;
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
@notification-background-unseen: #dce8ff;
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;
@notification-background-read: #eaecf0;
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;
@badge-counter-background-unseen-alert: @color-destructive;
@badge-counter-background-unseen-message: @color-primary;
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-text-color: @color-base-emphasized;
@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;
Adjust layout for new notification panel designs Bug: T122646 Change-Id: I6cb6d121eb7e32737b1d73743061e1435e869c93
2016-01-13 03:36:47 +00:00
@notification-popup-width: 500px;
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;
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;
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
@specialpage-sidebar-width: 20em;
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;
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
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
@border-color: @border-color-heading;
Reference in a new issue Copy permalink