mediawiki-extensions-Echo/modules/overlay/ext.echo.overlay.css
Derk-Jan Hartman c638d44190 Echo: Better support for non-default skins, as well as no Javascript
This provides some rudimentary styling support to make Echo usable
with the Modern skin.
It also fixes the Notifications special page so it is styled
correctly in Modern, CologneBlue, or with Javascript turned off.
Also some more tweaks for Monobook skin.
Retiring the 'feedback' link from the special page, per PM.

Bug: 47932
Change-Id: I633a93a78f5a78d0642a3a059fa6f7208f99cec4
2013-06-07 11:36:19 -07:00

137 lines
2.7 KiB
CSS

.mw-echo-overlay {
position: absolute;
top: 30px;
left: -200px;
border: 1px solid silver;
background-color: #fff;
width: 450px;
min-height: 2em;
padding: 0;
color: #6D6D6D;
z-index: 100;
box-shadow: 0px 3px 8px rgba(50, 50, 50, 0.35);
}
.mw-echo-overlay-pokey {
/* @embed */
background-image: url('PokeyNorth.png');
background-repeat: no-repeat;
width: 21px;
height: 11px;
position: absolute;
z-index: 101;
top: 20px;
left: -5px;
}
#p-personal .mw-echo-overlay ul {
margin: 0;
padding: 0;
overflow: auto;
}
#p-personal .mw-echo-overlay li.mw-echo-notification {
background-color: #F0F0F0;
display: block;
float: none;
border-bottom: 1px solid #DDDDDD;
padding: 15px 40px 10px 10px;
margin: 0;
white-space: normal;
font-size: 13px;
line-height: 16px;
}
#p-personal .mw-echo-overlay li.mw-echo-notification:hover {
background-color: #F8F8F8;
}
#p-personal .mw-echo-overlay li.mw-echo-notification.mw-echo-unread,
#p-personal .mw-echo-overlay li.mw-echo-notification.mw-echo-unread:hover {
background-color: white;
}
#p-personal .mw-echo-overlay li.mw-echo-notification:last-child {
border-bottom: none;
}
.mw-echo-overlay-title {
/*border-bottom: 1px solid #A7D7F9;*/
font-size: 13px;
line-height: 15px;
height: 15px;
padding: 15px 15px 15px 28px;
border-bottom: 1px solid #DDDDDD;
position: relative;
}
#mw-echo-overlay-title-text {
display: inline-block;
}
#mw-echo-overlay-moreinfo-link {
display: inline-block;
margin: 0px 2px -1px 4px;
height: 13px;
width: 13px;
/* @embed */
background-image: url(Help.png);
background-repeat: no-repeat;
background-position: 0 0;
filter: alpha(opacity=50);
opacity: 0.5;
}
#mw-echo-overlay-moreinfo-link:hover {
filter: alpha(opacity=100);
opacity: 1.0;
}
#mw-echo-overlay-footer {
padding: 0px;
border-top: 1px solid #DDDDDD;
}
#mw-echo-overlay-link {
display: block;
clear: left;
float: left;
padding: 15px 15px 15px 60px;
/* 149px instead of 150px due to Chrome rounding bug (bug 47897) */
width: 149px;
min-height: 14px;
font-size: 13px;
/* @embed */
background: url(../icons/NotificationsPage-ltr.png) no-repeat 17% 50% !important;
}
#mw-echo-overlay-pref-link {
display: block;
float: left;
width: 174px;
min-height: 14px;
font-size: 13px;
padding: 15px 15px 15px 35px;
border-left: 1px solid #DDDDDD;
/* @embed */
background: url(../icons/Settings.png) no-repeat 5% 50% !important;
}
#pt-notifications {
position: relative;
}
.mw-echo-overlay-none {
font-size: 13px;
border-bottom: 1px solid #DDDDDD;
padding: 15px 15px 10px 60px;
}
#mw-echo-mark-read-button {
position: absolute;
bottom: 12px;
right: 15px;
padding: 1px 8px;
font-size: 11px;
line-height: 15px;
font-weight: normal;
}
#mw-echo-overlay-feedback-link {
position: absolute;
bottom: 12px;
right: 15px;
}