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

155 lines
2.5 KiB
Plaintext
Raw Normal View History

/* Echo specific CSS */
@import '../echo.variables';
.client-js .mw-echo-special-nojs {
min-height: 5em;
/* @embed */
background-image: url(../../images/pending.gif);
.mw-echo-special-container {
display: none;
}
}
/* Custom header styling for Vector and Monobook skins */
.mw-special-Notifications.skin-vector #firstHeading,
.mw-special-Notifications.skin-monobook #firstHeading {
max-width: 600px;
}
.mw-echo-special-markAllReadButton {
float: right;
}
/* 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-date-section {
border-bottom: 1px solid #C9C9C9;
margin: 20px 0 5px 0;
color: #686868;
display: inline-block;
width: 100%;
padding-bottom: 0.5em;
}
.mw-echo-date-section-text {
text-transform: uppercase;
font-size: 1.1em;
font-weight: 800;
display: inline-block;
}
ul.mw-echo-special-notifications {
max-width: 600px;
div.mw-htmlform-submit-buttons {
margin: 0;
}
list-style: none none;
padding: 0;
margin: 0;
width: 100%;
}
.mw-echo-special-navbar-top {
margin-bottom: 10px;
}
.mw-echo-special-navbar-bottom {
margin-top: 20px;
padding-top: 10px;
border-top: solid 1px #C9C9C9;
}
.mw-echo-notification {
padding: 30px 40px 15px 10px;
.mw-echo-markAsReadButton {
display: none;
button {
padding: 0;
}
}
}
.mw-echo-markAsReadSectionButton {
float: right;
display: inline-block;
button.oo-ui-buttonElement-button {
padding: 2px 12px 2px 12px;
}
// HACK: temporary workaround for T136024
line-height: normal;
.oo-ui-buttonElement-button {
.oo-ui-labelElement-label {
font-weight: normal;
}
}
}
.mw-echo-special-notifications {
overflow-y: auto;
.mw-echo-notification {
background-color: #F1F1F1;
&:hover {
/* Fallback for IE<=8 */
background-color: #F6F6F6;
background-color: rgba(0, 0, 0, 0.035);
}
&-unread {
color: #252525;
background-color: transparent;
padding-right: 0;
.mw-echo-title {
font-weight: bold;
}
.mw-echo-markAsReadButton {
float: right;
display: inline-block;
margin: 0;
opacity: 0.5;
&:hover {
opacity: 1;
}
}
}
}
}
div.mw-htmlform-ooui-wrapper {
margin: 0;
}