mediawiki-extensions-Echo/modules/nojs/mw.echo.special.less

95 lines
1.7 KiB
Plaintext
Raw Normal View History

/* Echo specific CSS */
#mw-echo-more {
display: block;
text-align: center;
font-size: 13px;
max-width: 600px;
}
/* Custom header styling for Vector and Monobook skins */
.mw-special-Notifications.skin-vector #firstHeading,
.mw-special-Notifications.skin-monobook #firstHeading {
max-width: 600px;
}
/* Special styles to use if we're converting subtitle links into header icons */
#firstHeading {
.mw-echo-special-header-link {
display: block;
height: 19px;
width: 19px;
}
#mw-echo-pref-link {
float: right;
margin: 5px 3px;
/* @embed */
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
background-image: url(../icons/Preferences.png);
background-repeat: no-repeat;
background-position: 0 0;
filter: alpha(opacity=50);
opacity: 0.5;
&:hover {
filter: alpha(opacity=100);
opacity: 1.0;
}
}
#mw-echo-moreinfo-link {
display: inline-block;
margin: 0 3px;
/* @embed */
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
background-image: url(../icons/Help.png);
background-repeat: no-repeat;
background-position: 0 0;
filter: alpha(opacity=50);
opacity: 0.5;
&:hover {
filter: alpha(opacity=100);
opacity: 1.0;
}
}
}
.mw-echo-date-section {
font-weight: 800;
font-size: 1.1em;
text-transform: uppercase;
border-bottom: 1px solid #C9C9C9;
margin: 30px 0 5px 50px;
color: #686868;
max-width: 550px;
}
ul#mw-echo-special-container {
list-style: none none;
padding: 0;
margin: 30px 0 0 0;
max-width: 600px;
}
.mw-echo-notification {
padding: 15px 35px 10px 0;
}
#mw-echo-special-container {
.mw-echo-notification {
background-color: transparent;
&:hover {
/* Fallback for IE<=8 */
background-color: #F6F6F6;
background-color: rgba(0, 0, 0, 0.035);
}
&.mw-echo-unread {
.mw-echo-title {
font-weight: bold;
}
}
}
}