mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-09-25 11:17:49 +00:00
4fdae24555
Binding it to the element name should rarely be needed as it only adds complexity with no clear benefit. Nesting classes should also rarely be necessary as it basically requires the code will never be embedded in or itself embed something from another component (otherwise you'd clash with that other component's class name, and if you don't clash, then it wasn't neccecary to nest the class in the first place). If the class is overlay-specfic it should be renamed to something like '.mw-echo-overlay-grey-link'. Keeping it as-is and applying directly though, as it doesn't appear overlay-specific. Change-Id: Ied601058c8e501914113d542f88542c83157d5a0
196 lines
3.2 KiB
Plaintext
196 lines
3.2 KiB
Plaintext
@import '../mixins.less';
|
|
@import "mediawiki.mixins";
|
|
@import "mediawiki.ui/variables";
|
|
@import "mediawiki.ui/mixins";
|
|
|
|
@offset: 200px;
|
|
@chevronHeight: 11px;
|
|
@headerFontSize: 13px;
|
|
.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;
|
|
// subtract half the width from the offset and then add the left box shadow
|
|
left: @offset - 10px + 3px;
|
|
}
|
|
|
|
button {
|
|
top: 15px;
|
|
right: 15px;
|
|
position: absolute;
|
|
padding: 0;
|
|
}
|
|
|
|
.mw-ui-progressive {
|
|
cursor: pointer;
|
|
&.mw-ui-quiet {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|