mediawiki-extensions-Echo/modules/overlay/ext.echo.overlay.css

167 lines
3.4 KiB
CSS
Raw Normal View History

.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: 0 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 {
display: block;
float: none;
Make items on notifications flyout behave like links We want the notifications in the flyout to behave just like links, including standard middle-click and Ctrl-click behavior. The simplest way to do that would be to actually make them links - but the area can contain a few other links, so we can't do that and have to resort to ugly hacks. Or do we? Turns out that while browsers won't accept HTML containing nested <a> tags[1], such a structure is valid XHTML, and it's possible to create such structure in HTML mode using DOM manipulation. It works like one would expect: the entire thing is clickable, but inner <a> tags' hrefs override outer ones. Firefox even had a request to make that work[2] which was happily fulfilled. Tested the basic case [see below] on Firefox 22, Opera 12, Opera 15 (which uses the Blink engine like Chrome), IE 8 and IE 6 and it works the same on all of them. Tested the XHTML variant [see below] on all of the above except for the IEs which don't grok XHTML and it exhibits the same behavior. [1] Simple test: $('<div>1<a>2<a>3</a>4</a>5</div>').html() is "1<a>2</a><a>3</a>45", not actually "1<a>2<a>3</a>4</a>5" like one might expect. [2] https://bugzilla.mozilla.org/show_bug.cgi?id=331959 ---- The test cases used are below. When trying out the XHTML one make sure that the browser uses application/xhtml+xml MIME type; saving the file with .xhtml extension should be enough. XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div>1<a href="http://google.com/">2<a href="http://example.com/">3</a>4</a>5</div> </body> </html> HTML: <!DOCTYPE html> <html> <body> <script type="text/javascript"> var div = document.createElement('div'); var a1 = document.createElement('a'); a1.href = "http://google.com/"; var a2 = document.createElement('a'); a2.href = "http://example.com/"; div.appendChild( document.createTextNode('1') ); div.appendChild( a1 ); a1.appendChild( document.createTextNode('2') ); a1.appendChild( a2 ); a2.appendChild( document.createTextNode('3') ); a1.appendChild( document.createTextNode('4') ); div.appendChild( document.createTextNode('5') ); document.body.appendChild(div); </script> </body> </html> ---- Bug: 52319 Change-Id: I311eca70f025ce92129c828cd88f96686b7cff72
2013-08-05 21:10:08 +00:00
margin: 0;
padding: 0;
}
#p-personal .mw-echo-overlay li.mw-echo-notification .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;
Make items on notifications flyout behave like links We want the notifications in the flyout to behave just like links, including standard middle-click and Ctrl-click behavior. The simplest way to do that would be to actually make them links - but the area can contain a few other links, so we can't do that and have to resort to ugly hacks. Or do we? Turns out that while browsers won't accept HTML containing nested <a> tags[1], such a structure is valid XHTML, and it's possible to create such structure in HTML mode using DOM manipulation. It works like one would expect: the entire thing is clickable, but inner <a> tags' hrefs override outer ones. Firefox even had a request to make that work[2] which was happily fulfilled. Tested the basic case [see below] on Firefox 22, Opera 12, Opera 15 (which uses the Blink engine like Chrome), IE 8 and IE 6 and it works the same on all of them. Tested the XHTML variant [see below] on all of the above except for the IEs which don't grok XHTML and it exhibits the same behavior. [1] Simple test: $('<div>1<a>2<a>3</a>4</a>5</div>').html() is "1<a>2</a><a>3</a>45", not actually "1<a>2<a>3</a>4</a>5" like one might expect. [2] https://bugzilla.mozilla.org/show_bug.cgi?id=331959 ---- The test cases used are below. When trying out the XHTML one make sure that the browser uses application/xhtml+xml MIME type; saving the file with .xhtml extension should be enough. XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div>1<a href="http://google.com/">2<a href="http://example.com/">3</a>4</a>5</div> </body> </html> HTML: <!DOCTYPE html> <html> <body> <script type="text/javascript"> var div = document.createElement('div'); var a1 = document.createElement('a'); a1.href = "http://google.com/"; var a2 = document.createElement('a'); a2.href = "http://example.com/"; div.appendChild( document.createTextNode('1') ); div.appendChild( a1 ); a1.appendChild( document.createTextNode('2') ); a1.appendChild( a2 ); a2.appendChild( document.createTextNode('3') ); a1.appendChild( document.createTextNode('4') ); div.appendChild( document.createTextNode('5') ); document.body.appendChild(div); </script> </body> </html> ---- Bug: 52319 Change-Id: I311eca70f025ce92129c828cd88f96686b7cff72
2013-08-05 21:10:08 +00:00
/* Suppress standard links styles */
color: inherit;
text-decoration: inherit;
}
Make items on notifications flyout behave like links We want the notifications in the flyout to behave just like links, including standard middle-click and Ctrl-click behavior. The simplest way to do that would be to actually make them links - but the area can contain a few other links, so we can't do that and have to resort to ugly hacks. Or do we? Turns out that while browsers won't accept HTML containing nested <a> tags[1], such a structure is valid XHTML, and it's possible to create such structure in HTML mode using DOM manipulation. It works like one would expect: the entire thing is clickable, but inner <a> tags' hrefs override outer ones. Firefox even had a request to make that work[2] which was happily fulfilled. Tested the basic case [see below] on Firefox 22, Opera 12, Opera 15 (which uses the Blink engine like Chrome), IE 8 and IE 6 and it works the same on all of them. Tested the XHTML variant [see below] on all of the above except for the IEs which don't grok XHTML and it exhibits the same behavior. [1] Simple test: $('<div>1<a>2<a>3</a>4</a>5</div>').html() is "1<a>2</a><a>3</a>45", not actually "1<a>2<a>3</a>4</a>5" like one might expect. [2] https://bugzilla.mozilla.org/show_bug.cgi?id=331959 ---- The test cases used are below. When trying out the XHTML one make sure that the browser uses application/xhtml+xml MIME type; saving the file with .xhtml extension should be enough. XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div>1<a href="http://google.com/">2<a href="http://example.com/">3</a>4</a>5</div> </body> </html> HTML: <!DOCTYPE html> <html> <body> <script type="text/javascript"> var div = document.createElement('div'); var a1 = document.createElement('a'); a1.href = "http://google.com/"; var a2 = document.createElement('a'); a2.href = "http://example.com/"; div.appendChild( document.createTextNode('1') ); div.appendChild( a1 ); a1.appendChild( document.createTextNode('2') ); a1.appendChild( a2 ); a2.appendChild( document.createTextNode('3') ); a1.appendChild( document.createTextNode('4') ); div.appendChild( document.createTextNode('5') ); document.body.appendChild(div); </script> </body> </html> ---- Bug: 52319 Change-Id: I311eca70f025ce92129c828cd88f96686b7cff72
2013-08-05 21:10:08 +00:00
#p-personal .mw-echo-overlay li.mw-echo-notification:hover .mw-echo-notification-wrapper {
background-color: #F9F9F9;
}
Make items on notifications flyout behave like links We want the notifications in the flyout to behave just like links, including standard middle-click and Ctrl-click behavior. The simplest way to do that would be to actually make them links - but the area can contain a few other links, so we can't do that and have to resort to ugly hacks. Or do we? Turns out that while browsers won't accept HTML containing nested <a> tags[1], such a structure is valid XHTML, and it's possible to create such structure in HTML mode using DOM manipulation. It works like one would expect: the entire thing is clickable, but inner <a> tags' hrefs override outer ones. Firefox even had a request to make that work[2] which was happily fulfilled. Tested the basic case [see below] on Firefox 22, Opera 12, Opera 15 (which uses the Blink engine like Chrome), IE 8 and IE 6 and it works the same on all of them. Tested the XHTML variant [see below] on all of the above except for the IEs which don't grok XHTML and it exhibits the same behavior. [1] Simple test: $('<div>1<a>2<a>3</a>4</a>5</div>').html() is "1<a>2</a><a>3</a>45", not actually "1<a>2<a>3</a>4</a>5" like one might expect. [2] https://bugzilla.mozilla.org/show_bug.cgi?id=331959 ---- The test cases used are below. When trying out the XHTML one make sure that the browser uses application/xhtml+xml MIME type; saving the file with .xhtml extension should be enough. XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div>1<a href="http://google.com/">2<a href="http://example.com/">3</a>4</a>5</div> </body> </html> HTML: <!DOCTYPE html> <html> <body> <script type="text/javascript"> var div = document.createElement('div'); var a1 = document.createElement('a'); a1.href = "http://google.com/"; var a2 = document.createElement('a'); a2.href = "http://example.com/"; div.appendChild( document.createTextNode('1') ); div.appendChild( a1 ); a1.appendChild( document.createTextNode('2') ); a1.appendChild( a2 ); a2.appendChild( document.createTextNode('3') ); a1.appendChild( document.createTextNode('4') ); div.appendChild( document.createTextNode('5') ); document.body.appendChild(div); </script> </body> </html> ---- Bug: 52319 Change-Id: I311eca70f025ce92129c828cd88f96686b7cff72
2013-08-05 21:10:08 +00:00
#p-personal .mw-echo-overlay li.mw-echo-notification.mw-echo-unread .mw-echo-notification-wrapper {
background-color: white;
}
Make items on notifications flyout behave like links We want the notifications in the flyout to behave just like links, including standard middle-click and Ctrl-click behavior. The simplest way to do that would be to actually make them links - but the area can contain a few other links, so we can't do that and have to resort to ugly hacks. Or do we? Turns out that while browsers won't accept HTML containing nested <a> tags[1], such a structure is valid XHTML, and it's possible to create such structure in HTML mode using DOM manipulation. It works like one would expect: the entire thing is clickable, but inner <a> tags' hrefs override outer ones. Firefox even had a request to make that work[2] which was happily fulfilled. Tested the basic case [see below] on Firefox 22, Opera 12, Opera 15 (which uses the Blink engine like Chrome), IE 8 and IE 6 and it works the same on all of them. Tested the XHTML variant [see below] on all of the above except for the IEs which don't grok XHTML and it exhibits the same behavior. [1] Simple test: $('<div>1<a>2<a>3</a>4</a>5</div>').html() is "1<a>2</a><a>3</a>45", not actually "1<a>2<a>3</a>4</a>5" like one might expect. [2] https://bugzilla.mozilla.org/show_bug.cgi?id=331959 ---- The test cases used are below. When trying out the XHTML one make sure that the browser uses application/xhtml+xml MIME type; saving the file with .xhtml extension should be enough. XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div>1<a href="http://google.com/">2<a href="http://example.com/">3</a>4</a>5</div> </body> </html> HTML: <!DOCTYPE html> <html> <body> <script type="text/javascript"> var div = document.createElement('div'); var a1 = document.createElement('a'); a1.href = "http://google.com/"; var a2 = document.createElement('a'); a2.href = "http://example.com/"; div.appendChild( document.createTextNode('1') ); div.appendChild( a1 ); a1.appendChild( document.createTextNode('2') ); a1.appendChild( a2 ); a2.appendChild( document.createTextNode('3') ); a1.appendChild( document.createTextNode('4') ); div.appendChild( document.createTextNode('5') ); document.body.appendChild(div); </script> </body> </html> ---- Bug: 52319 Change-Id: I311eca70f025ce92129c828cd88f96686b7cff72
2013-08-05 21:10:08 +00:00
#p-personal .mw-echo-overlay li.mw-echo-notification.mw-echo-unread:hover .mw-echo-notification-wrapper {
background-color: #F9F9F9;
}
Make items on notifications flyout behave like links We want the notifications in the flyout to behave just like links, including standard middle-click and Ctrl-click behavior. The simplest way to do that would be to actually make them links - but the area can contain a few other links, so we can't do that and have to resort to ugly hacks. Or do we? Turns out that while browsers won't accept HTML containing nested <a> tags[1], such a structure is valid XHTML, and it's possible to create such structure in HTML mode using DOM manipulation. It works like one would expect: the entire thing is clickable, but inner <a> tags' hrefs override outer ones. Firefox even had a request to make that work[2] which was happily fulfilled. Tested the basic case [see below] on Firefox 22, Opera 12, Opera 15 (which uses the Blink engine like Chrome), IE 8 and IE 6 and it works the same on all of them. Tested the XHTML variant [see below] on all of the above except for the IEs which don't grok XHTML and it exhibits the same behavior. [1] Simple test: $('<div>1<a>2<a>3</a>4</a>5</div>').html() is "1<a>2</a><a>3</a>45", not actually "1<a>2<a>3</a>4</a>5" like one might expect. [2] https://bugzilla.mozilla.org/show_bug.cgi?id=331959 ---- The test cases used are below. When trying out the XHTML one make sure that the browser uses application/xhtml+xml MIME type; saving the file with .xhtml extension should be enough. XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div>1<a href="http://google.com/">2<a href="http://example.com/">3</a>4</a>5</div> </body> </html> HTML: <!DOCTYPE html> <html> <body> <script type="text/javascript"> var div = document.createElement('div'); var a1 = document.createElement('a'); a1.href = "http://google.com/"; var a2 = document.createElement('a'); a2.href = "http://example.com/"; div.appendChild( document.createTextNode('1') ); div.appendChild( a1 ); a1.appendChild( document.createTextNode('2') ); a1.appendChild( a2 ); a2.appendChild( document.createTextNode('3') ); a1.appendChild( document.createTextNode('4') ); div.appendChild( document.createTextNode('5') ); document.body.appendChild(div); </script> </body> </html> ---- Bug: 52319 Change-Id: I311eca70f025ce92129c828cd88f96686b7cff72
2013-08-05 21:10:08 +00:00
#p-personal .mw-echo-overlay li.mw-echo-notification:last-child .mw-echo-notification-wrapper {
border-bottom: none;
}
#p-personal .mw-echo-title a {
font-weight: bold;
}
#p-personal .mw-echo-overlay a.mw-echo-grey-link {
color: #6D6D6D;
}
.mw-echo-notification-primary-link {
display: none;
}
.mw-echo-overlay-title {
/*border-bottom: 1px solid #A7D7F9;*/
font-size: 13px;
line-height: 15px;
padding: 15px 15px 15px 28px;
border-bottom: 1px solid #DDDDDD;
}
#mw-echo-overlay-title-text {
display: inline;
zoom: 1;
white-space: normal;
}
#mw-echo-overlay-moreinfo-link {
display: inline-block;
margin: 0 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: 0;
border-top: 1px solid #DDDDDD;
display: table;
width: 100%;
}
#mw-echo-overlay-footer a {
float: none;
display: table-cell;
}
#mw-echo-overlay-link {
display: block;
clear: left;
float: left;
padding: 15px 15px 15px 45px;
min-height: 14px;
font-size: 13px;
font-weight: bold;
/* @embed */
background: url(../icons/NotificationsPage-ltr.png) no-repeat 20px 15px !important;
white-space: normal;
}
#mw-echo-overlay-link:hover {
text-decoration: none;
}
#mw-echo-overlay-pref-link {
display: block;
float: left;
min-height: 14px;
font-size: 13px;
font-weight: bold;
padding: 15px 15px 15px 45px;
border-left: 1px solid #DDDDDD;
/* @embed */
background: url(../icons/Settings.png) no-repeat 20px 15px !important;
white-space: normal;
}
#mw-echo-overlay-pref-link:hover {
text-decoration: none;
}
#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 {
float: right;
margin: -1px 0 0 10px;
padding: 1px 8px;
font-size: 11px;
line-height: 15px;
font-weight: normal;
}
#mw-echo-overlay-feedback-link {
position: absolute;
bottom: 12px;
right: 15px;
}