mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-11-28 17:50:39 +00:00
da07893647
I tried to stick as close to the existing code as possible. Special:Notifications is slightly different from the overlay, however. I made it add .mw-echo-unread class for consistency, but that JS doesn't record seen time (it only loads older entries), not does the CSS fadeout apply there (it marks everything as read as soon as it's displayed, so different behavior from overlay) PS: I'm not sure about browser compat for the fadeout. But even if some obscure browsers don't support this, meh. It's not an "important" feature that can't be missed. Bug: T94634 Change-Id: Ibb201823fb52ef8a3d5eaa39b0b724ede8d271d1
234 lines
4 KiB
Plaintext
234 lines
4 KiB
Plaintext
@import '../mixins.less';
|
|
@import "mediawiki.mixins";
|
|
@import "mediawiki.ui/variables";
|
|
@import "mediawiki.ui/mixins";
|
|
|
|
@offset: 200px;
|
|
@chevronHeight: 11px;
|
|
@headerFontSize: 13px;
|
|
|
|
@-webkit-keyframes unseen-fadeout {
|
|
from { background-color: #dce8ff; }
|
|
to { background-color: white; }
|
|
}
|
|
|
|
@keyframes unseen-fadeout {
|
|
from { background-color: #dce8ff; }
|
|
to { background-color: white; }
|
|
}
|
|
|
|
.mw-echo-overlay {
|
|
position: absolute;
|
|
top: 30px + @chevronHeight;
|
|
border: 1px solid silver;
|
|
background-color: #fff;
|
|
width: 450px;
|
|
min-height: 2em;
|
|
padding: 0;
|
|
color: #6D6D6D;
|
|
z-index: 100;
|
|
box-shadow: 0 3px 8px rgba(50, 50, 50, 0.35);
|
|
|
|
// IE8
|
|
&:before,
|
|
&::before {
|
|
content: '';
|
|
background-image: url('PokeyNorth.png');
|
|
background-repeat: no-repeat;
|
|
width: 21px;
|
|
height: @chevronHeight;
|
|
position: absolute;
|
|
z-index: 101;
|
|
top: -@chevronHeight;
|
|
|
|
/* @noflip */ body.ltr & {
|
|
// subtract half the width from the offset and then add the left box shadow
|
|
/* @noflip */ left: @offset - 10px + 3px;
|
|
}
|
|
|
|
/* @noflip */ body.rtl & {
|
|
// subtract the box shadow
|
|
/* @noflip */ left: @offset - 3px;
|
|
}
|
|
}
|
|
|
|
button {
|
|
top: 15px;
|
|
right: 15px;
|
|
position: absolute;
|
|
padding: 0;
|
|
}
|
|
|
|
.mw-ui-progressive {
|
|
cursor: pointer;
|
|
|
|
&.mw-ui-quiet {
|
|
pointer-events: none;
|
|
color: #6D6D6D;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.mw-echo-notifications,
|
|
ul {
|
|
overflow: auto;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.mw-echo-notifications {
|
|
button {
|
|
// Add 1px border to 15px line height so lines up with tabs
|
|
line-height: 16px;
|
|
font-size: @headerFontSize;
|
|
}
|
|
}
|
|
|
|
li.mw-echo-notification {
|
|
display: block;
|
|
padding: 0;
|
|
|
|
&:hover {
|
|
.mw-echo-notification-wrapper {
|
|
background-color: #F9F9F9;
|
|
}
|
|
}
|
|
|
|
.mw-echo-notification-wrapper {
|
|
display: block;
|
|
background-color: #F1F1F1;
|
|
border-bottom: 1px solid #DDDDDD;
|
|
padding: 15px 40px 10px 10px;
|
|
white-space: normal;
|
|
font-size: 13px;
|
|
line-height: 16px;
|
|
/* Suppress standard links styles */
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
}
|
|
|
|
&.mw-echo-unread {
|
|
.mw-echo-notification-wrapper {
|
|
background-color: white;
|
|
}
|
|
|
|
&:hover {
|
|
.mw-echo-notification-wrapper {
|
|
background-color: #F9F9F9;
|
|
}
|
|
}
|
|
|
|
&.mw-echo-unseen {
|
|
.mw-echo-notification-wrapper {
|
|
-webkit-animation-name: unseen-fadeout;
|
|
animation-name: unseen-fadeout;
|
|
-webkit-animation-duration: .5s;
|
|
animation-duration: .5s;
|
|
-webkit-animation-delay: 2s;
|
|
animation-delay: 2s;
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
}
|
|
}
|
|
|
|
button {
|
|
background: none;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
.mw-echo-notification-wrapper {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mw-echo-title {
|
|
color: @colorTextLight;
|
|
|
|
.mw-echo-title-heading {
|
|
color: @colorTextLight;
|
|
font-size: 1.15em;
|
|
|
|
&, a {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.mw-echo-title-heading,
|
|
.plainlinks {
|
|
.truncated-text();
|
|
max-width: 100%;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
.mw-echo-grey-link {
|
|
color: @colorTextLight;
|
|
}
|
|
|
|
.mw-echo-notification-primary-link {
|
|
display: none;
|
|
}
|
|
|
|
.mw-echo-overlay-title {
|
|
font-size: @headerFontSize;
|
|
line-height: 15px;
|
|
padding: 15px 15px 15px 28px;
|
|
border-bottom: 1px solid #DDDDDD;
|
|
|
|
li {
|
|
display: inline;
|
|
font-size: 1em;
|
|
margin-left: 0;
|
|
|
|
&::after {
|
|
content: " · ";
|
|
padding: 0 .25em;
|
|
}
|
|
|
|
&:last-child {
|
|
&::after {
|
|
content: '';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.mw-echo-overlay-footer {
|
|
padding: 0;
|
|
border-top: 1px solid #DDDDDD;
|
|
display: table;
|
|
width: 100%;
|
|
|
|
a {
|
|
border-left: 1px solid #DDDDDD;
|
|
float: none;
|
|
display: table-cell;
|
|
min-height: 14px;
|
|
font-size: @headerFontSize;
|
|
white-space: normal;
|
|
font-weight: bold;
|
|
padding: 15px 15px 15px 45px;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mw-echo-icon-all {
|
|
/* @embed */
|
|
background: url(../icons/NotificationsPage-ltr.png) no-repeat 20px 15px !important;
|
|
}
|
|
|
|
.mw-echo-icon-cog {
|
|
/* @embed */
|
|
background: url(../icons/Settings.png) no-repeat 20px 15px !important;
|
|
}
|