show only graph lobby
This commit is contained in:
Thibault Duplessis
parent
eaa31e1119
commit
46d0837a9f
|
|
@ -7,7 +7,7 @@ import controllers.routes
|
|||
|
||||
trait AssetHelper {
|
||||
|
||||
val assetVersion = 49
|
||||
val assetVersion = 50
|
||||
|
||||
def cssTag(name: String) = css("stylesheets/" + name)
|
||||
|
||||
|
|
|
|||
|
|
@ -47,7 +47,6 @@ underchat = underchat.some) {
|
|||
<span class="s16 ddown">@trans.filterGames()</span>
|
||||
<span class="number">(0)</span>
|
||||
</a>
|
||||
<div id="hooks"></div>
|
||||
<div id="hooks_chart"><div class="canvas"></div></div>
|
||||
<a class="no_hook">@trans.noGameAvailableRightNowCreateOne()</a>
|
||||
<div id="hook_filter"></div>
|
||||
|
|
|
|||
|
|
@ -1938,28 +1938,6 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
|
|||
var animation = 500;
|
||||
|
||||
var pool = [];
|
||||
// extras
|
||||
// for (elo = 800; elo <= 2000; elo += 100) {
|
||||
// // for (elo = 1200; elo <= 1200; elo += 100) {
|
||||
// _.each(['0+1','1+0','2+0','3+0','4+0','5+0','6+0','7+0','8+0','9+0','10+0','12+0','15+0','20+0','25+0','30+0','30+30'], function(time) {
|
||||
// // _.each(['5+8'], function(time) {
|
||||
// pool.push({
|
||||
// username: elo + " and " + time,
|
||||
// id: elo + "and" + time.replace(/\+/,'-'),
|
||||
// elo: elo,
|
||||
// clock: time
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
|
||||
var slots = [];
|
||||
for (i = 1; i <= 12; i++) {
|
||||
var j = (i > 5) ? (i > 7) ? i + 4 : i + 2 : i;
|
||||
var top = Math.floor((j - 1) / 4) * 128;
|
||||
var left = ((j - 1) % 4) * 128;
|
||||
slots.push('<div id="slot' + i + '" style="top:' + top + 'px;left:' + left + 'px;"></div>');
|
||||
}
|
||||
$hooks.html(slots.join(''));
|
||||
|
||||
$wrap.find('a.filter').click(function() {
|
||||
var $a = $(this);
|
||||
|
|
@ -2103,6 +2081,13 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
|
|||
drawHooks();
|
||||
}
|
||||
|
||||
function undrawHook(hook) {
|
||||
$('#'+hook.id).not('.hiding').addClass('hiding').fadeOut(animation, function() {
|
||||
$.powerTip.destroy($(this));
|
||||
$(this).remove();
|
||||
});
|
||||
}
|
||||
|
||||
function drawHooks() {
|
||||
var filter = lichess_preload.filter;
|
||||
var seen = [];
|
||||
|
|
@ -2115,33 +2100,26 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
|
|||
(filter.eloDiff > 0 && (!hook.elo || hook.elo > (myElo + filter.eloDiff) || hook.elo < (myElo - filter.eloDiff)));
|
||||
var hash = hook.mode + hook.variant + hook.clock + hook.elo;
|
||||
if (hide && hook.action != 'cancel') {
|
||||
$wrap.find('.' + hook.id).not('.hiding').addClass('hiding').fadeOut(animation, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
undrawHook(hook);
|
||||
hidden++;
|
||||
} else if (_.contains(seen, hash) && hook.action != 'cancel') {
|
||||
$wrap.find('.' + hook.id).filter(':visible').hide();
|
||||
$('#' + hook.id).filter(':visible').hide();
|
||||
hidden++;
|
||||
} else {
|
||||
visible++;
|
||||
if (!$hooks.find('div.' + hook.id).length) {
|
||||
$(_.shuffle($hooks.find('>div:empty'))[0]).html($(renderHook(hook)).fadeIn(animation));
|
||||
}
|
||||
if (!$canvas.find('> span.' + hook.id).length) {
|
||||
if (!$('#' + hook.id).length) {
|
||||
$canvas.append($(renderPlot(hook)).fadeIn(animation));
|
||||
}
|
||||
$wrap.find('.' + hook.id).not(':visible').fadeIn(animation);
|
||||
$wrap.find('#' + hook.id).not(':visible').fadeIn(animation);
|
||||
}
|
||||
if (hook.action != 'cancel') seen.push(hash);
|
||||
});
|
||||
$hooks.find('div.hook').each(function() {
|
||||
var id = $(this).data('id');
|
||||
$canvas.find('>span.plot').each(function() {
|
||||
var id = $(this).attr('id');
|
||||
if (!_.find(pool, function(h) {
|
||||
return h.id == id;
|
||||
})) {
|
||||
$wrap.find('.' + id).fadeOut(animation, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
undrawHook($(this).data('hook'));
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -2157,17 +2135,28 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
|
|||
var left = clockX(hook.clock);
|
||||
var klass = [
|
||||
'plot',
|
||||
hook.id,
|
||||
hook.mode == "Rated" ? 'rated' : 'casual',
|
||||
hook.variant == "Chess960" ? 'chess960' : '',
|
||||
hook.action == 'cancel' ? 'cancel' : ''
|
||||
].join(' ');
|
||||
return '<span data-id="' + hook.id + '" class="' + klass + '" style="bottom:' + bottom + 'px;left:' + left + 'px;"></span>';
|
||||
var $plot = $('<span id="' + hook.id + '" class="' + klass + '" style="bottom:' + bottom + 'px;left:' + left + 'px;"></span>');
|
||||
return $plot.data('hook', hook).powerTip({
|
||||
fadeInTime: 0,
|
||||
fadeOutTime: 0,
|
||||
placement: 'ne',
|
||||
mouseOnToPopup: true,
|
||||
closeDelay: 200,
|
||||
intentPollInterval: 50
|
||||
}).data('powertipjq', $(renderHook(hook))).on({
|
||||
powerTipRender: function() {
|
||||
$('#powerTip').addClass('hook');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function eloY(e) {
|
||||
function eloLog(a) {
|
||||
return Math.log(a / 200 + 1);
|
||||
return Math.log(a / 150 + 1);
|
||||
}
|
||||
var elo = Math.max(800, Math.min(2000, e || 1200));
|
||||
if (elo == 1200) {
|
||||
|
|
@ -2177,11 +2166,12 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
|
|||
} else {
|
||||
var ratio = 0.25 - (eloLog(1200 - elo) / eloLog(400)) / 4;
|
||||
}
|
||||
return Math.round(ratio * 237);
|
||||
return Math.round(ratio * 489);
|
||||
}
|
||||
|
||||
function clockX(c) {
|
||||
var maxDur = 2000;
|
||||
|
||||
function durLog(a) {
|
||||
return Math.log((a - 30) / 200 + 1);
|
||||
}
|
||||
|
|
@ -2189,81 +2179,59 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
|
|||
var parts = c.replace(/\s/g, '').split('+');
|
||||
var dur = Math.min(maxDur, parseInt(parts[0]) * 60 + parseInt(parts[1]) * 30);
|
||||
} else dur = maxDur;
|
||||
return Math.round(durLog(dur) / durLog(maxDur) * 237);
|
||||
return Math.round(durLog(dur) / durLog(maxDur) * 489);
|
||||
}
|
||||
|
||||
function renderHook(hook) {
|
||||
var title = hook.action == 'cancel' ? 'title="Click to cancel"' : '';
|
||||
var klass = ['hook', hook.id, hook.action].join(' ');
|
||||
var html = '<div '+title+' data-id="' + hook.id + '" class="' + klass + '">';
|
||||
var html = '';
|
||||
if (hook.elo) {
|
||||
html += '<a class="opponent ulpt" href="/@/' + hook.username + '">' + hook.username.substr(0, 14) + '</a>';
|
||||
html += '<a class="opponent" href="/@/' + hook.username + '">' + hook.username.substr(0, 14) + '</a>';
|
||||
html += '<span class="elo">' + hook.elo + '</span>';
|
||||
} else {
|
||||
html += '<span class="opponent anon">Anonymous</span>';
|
||||
}
|
||||
if (isRegistered) {
|
||||
var mode = $.trans(hook.mode);
|
||||
} else {
|
||||
var mode = "";
|
||||
}
|
||||
if (hook.clock) {
|
||||
var clock = hook.clock.replace(/\s/g, '').replace(/\+/, '<span>+</span>');
|
||||
html += '<span class="clock">' + clock + '</span>';
|
||||
} else {
|
||||
html += '<span class="clock nope">∞</span>';
|
||||
}
|
||||
html += '<span class="mode">' + mode + '</span>';
|
||||
if(hook.color) {
|
||||
html += '<span class="color s16 '+hook.color+'"></span>';
|
||||
html += '<span class="mode">' + $.trans(hook.mode) + '</span>';
|
||||
if (hook.color) {
|
||||
html += '<span class="color s16 ' + hook.color + '"></span>';
|
||||
}
|
||||
if(hook.engine && hook.action == 'join') {
|
||||
if (hook.engine && hook.action == 'join') {
|
||||
html += '<span class="s16 engine"></span>';
|
||||
}
|
||||
if (hook.action == "cancel") {
|
||||
html += '<a class="action socket-link" data-msg="cancel"><span></span></a>';
|
||||
} else {
|
||||
html += '<a class="action socket-link" data-msg="join" data-data="' + hook.id + '"><span></span></a>';
|
||||
}
|
||||
if (hook.variant == 'Chess960') {
|
||||
html += '<span class="chess960">Chess 960</span>';
|
||||
}
|
||||
html += '</div>';
|
||||
var $hook = $(html).data('hook', hook);
|
||||
if (hook.variant == "Chess960" && !$.cookie('c960')) {
|
||||
$hook.find('a.join').click(function() {
|
||||
var c = confirm("This is a Chess960 game!\n\nThe starting position of the pieces on the players' home ranks is randomized.\nRead more: http://wikipedia.org/wiki/Chess960\n\nDo you want to play Chess960?");
|
||||
if (c) $.cookie('c960', 1);
|
||||
return c;
|
||||
});
|
||||
}
|
||||
return $hook;
|
||||
return html;
|
||||
}
|
||||
|
||||
$('#hooks_chart').append(
|
||||
_.map([1000, 1200, 1300, 1400, 1600, 1800, 2000], function(v) {
|
||||
return '<span class="y label" style="bottom:' + (eloY(v) + 4) + 'px">' + v + '</span>';
|
||||
}).join('') +
|
||||
_.map([1, 2, 3, 5, 10, 15, 20, 30], function(v) {
|
||||
return '<span class="x label" style="left:' + (clockX(v+"+0")) + 'px">' + v + '</span>';
|
||||
}).join('')
|
||||
);
|
||||
return '<span class="y label" style="bottom:' + (eloY(v) + 4) + 'px">' + v + '</span>';
|
||||
}).join('') +
|
||||
_.map([1, 2, 3, 5, 7, 10, 15, 20, 30], function(v) {
|
||||
return '<span class="x label" style="left:' + (clockX(v + "+0")) + 'px">' + v + '</span>';
|
||||
}).join(''));
|
||||
|
||||
$wrap.on('mouseenter', '.plot, div.hook', function() {
|
||||
$wrap.find('.' + $(this).data('id')).addClass('hover');
|
||||
}).on('mouseleave', '.plot, div.hook', function(e) {
|
||||
$wrap.find('.' + $(this).data('id')).removeClass('hover');
|
||||
});
|
||||
$wrap.on('click', '.plot', function() {
|
||||
$hooks.find('.' + $(this).data('id')).click();
|
||||
});
|
||||
$hooks.on('click', 'div.hook a.opponent', function(e) {
|
||||
e.stopPropagation();
|
||||
return true;
|
||||
});
|
||||
$hooks.on('click', 'div.hook:not(.hiding)', function() {
|
||||
var $a = $(this).find('a.action');
|
||||
lichess.socket.send($a.data('msg'), $a.data('data'));
|
||||
function confirm960(hook) {
|
||||
if (hook.variant == "Chess960" && !$.cookie('c960')) {
|
||||
var c = confirm("This is a Chess960 game!\n\nThe starting position of the pieces on the players' home ranks is randomized.\nRead more: http://wikipedia.org/wiki/Chess960\n\nDo you want to play Chess960?");
|
||||
if (c) $.cookie('c960', 1);
|
||||
return c;
|
||||
}
|
||||
else return true;
|
||||
}
|
||||
|
||||
$canvas.on('click', '>span.plot:not(.hiding)', function() {
|
||||
var hook = $(this).data('hook');
|
||||
if (confirm960(hook)) {
|
||||
if (hook.action == 'cancel') lichess.socket.send('cancel');
|
||||
else lichess.socket.send('join', hook.id);
|
||||
}
|
||||
});
|
||||
$noHook.click(function() {
|
||||
$('#start_buttons a.config_hook').click();
|
||||
|
|
|
|||
|
|
@ -210,6 +210,104 @@ ul.ui-autocomplete li a.ui-state-focus {
|
|||
.ui-slider-vertical .ui-slider-range-max {
|
||||
top: 0;
|
||||
}
|
||||
#powerTip {
|
||||
width: 240px;
|
||||
min-height: 6em;
|
||||
cursor: default;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #c0c0c0;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 2147483647;
|
||||
}
|
||||
#powerTip > .title {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #c0c0c0;
|
||||
}
|
||||
#powerTip > .content {
|
||||
text-align: right;
|
||||
padding: 16px 8px;
|
||||
}
|
||||
#powerTip:before {
|
||||
content:"";
|
||||
position: absolute;
|
||||
}
|
||||
#powerTip.n:before, #powerTip.s:before {
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
}
|
||||
#powerTip.e:before, #powerTip.w:before {
|
||||
border-bottom: 5px solid transparent;
|
||||
border-top: 5px solid transparent;
|
||||
margin-top: -5px;
|
||||
top: 50%;
|
||||
}
|
||||
#powerTip.n:before {
|
||||
border-top: 10px solid #acacac;
|
||||
border-top: 10px solid rgba(172, 172, 172, 0.8);
|
||||
bottom: -10px;
|
||||
}
|
||||
#powerTip.e:before {
|
||||
border-right: 10px solid #acacac;
|
||||
border-right: 10px solid rgba(172, 172, 172, 0.8);
|
||||
left: -10px;
|
||||
}
|
||||
#powerTip.s:before {
|
||||
border-bottom: 10px solid #acacac;
|
||||
border-bottom: 10px solid rgba(172, 172, 172, 0.8);
|
||||
top: -10px;
|
||||
}
|
||||
#powerTip.w:before {
|
||||
border-left: 10px solid #acacac;
|
||||
border-left: 10px solid rgba(172, 172, 172, 0.8);
|
||||
right: -10px;
|
||||
}
|
||||
#powerTip.ne:before, #powerTip.se:before {
|
||||
border-right: 10px solid transparent;
|
||||
border-left: 0;
|
||||
left: 10px;
|
||||
}
|
||||
#powerTip.nw:before, #powerTip.sw:before {
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 0;
|
||||
right: 10px;
|
||||
}
|
||||
#powerTip.ne:before, #powerTip.nw:before {
|
||||
border-top: 10px solid #acacac;
|
||||
border-top: 10px solid rgba(172, 172, 172, 0.8);
|
||||
bottom: -10px;
|
||||
}
|
||||
#powerTip.se:before, #powerTip.sw:before {
|
||||
border-bottom: 10px solid #acacac;
|
||||
border-bottom: 10px solid rgba(172, 172, 172, 0.8);
|
||||
top: -10px;
|
||||
}
|
||||
#powerTip.nw-alt:before, #powerTip.ne-alt:before, #powerTip.sw-alt:before, #powerTip.se-alt:before {
|
||||
border-top: 10px solid #acacac;
|
||||
border-top: 10px solid rgba(172, 172, 172, 0.8);
|
||||
bottom: -10px;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
left: 10px;
|
||||
}
|
||||
#powerTip.ne-alt:before {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
#powerTip.sw-alt:before, #powerTip.se-alt:before {
|
||||
border-top: none;
|
||||
border-bottom: 10px solid #acacac;
|
||||
border-bottom: 10px solid rgba(172, 172, 172, 0.8);
|
||||
bottom: auto;
|
||||
top: -10px;
|
||||
}
|
||||
#powerTip.se-alt:before {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
.clearfix:after {
|
||||
content:".";
|
||||
display:block;
|
||||
|
|
@ -1359,29 +1457,31 @@ div.game_config div.color_submits button.random span {
|
|||
}
|
||||
#hooks_chart {
|
||||
position: absolute;
|
||||
top: 128px;
|
||||
left: 128px;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 512px;
|
||||
height: 512px;
|
||||
}
|
||||
#hooks_chart > span.label {
|
||||
font-size: 8px;
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
bottom: -13px;
|
||||
text-shadow: 0 0 3px #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
#hooks_chart .canvas {
|
||||
position: relative;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
width: 512px;
|
||||
height: 512px;
|
||||
}
|
||||
#hooks_chart .plot {
|
||||
position: absolute;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
background: #d0d0d0;
|
||||
border: 3px solid #666;
|
||||
box-shadow: 0 0 5px #777;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -1398,20 +1498,20 @@ div.game_config div.color_submits button.random span {
|
|||
-o-transform:rotate(45deg);
|
||||
-webkit-transform:rotate(45deg);
|
||||
-ms-transform:rotate(45deg);
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
#hooks_chart .plot.chess960 {
|
||||
border-style: double;
|
||||
border-width: 5px;
|
||||
}
|
||||
#hooks_chart .plot.casual.chess960 {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
#hooks_chart .plot.rated.chess960 {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
#hooks_chart .plot.cancel {
|
||||
background: #666;
|
||||
|
|
@ -1432,45 +1532,24 @@ div.game_config div.color_submits button.random span {
|
|||
box-shadow:0 0 5px #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
#hooks > div {
|
||||
position: absolute;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
background: none;
|
||||
}
|
||||
#hooks div.hook {
|
||||
display: none;
|
||||
position: relative;
|
||||
#powerTip.hook {
|
||||
display: block;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
z-index: 9;
|
||||
margin: 4px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
color: #444;
|
||||
text-align: center;
|
||||
border: none;
|
||||
box-shadow:0 0 9px #333;
|
||||
background: #d0d0d0 url(../images/play128.png) -4px -4px;
|
||||
box-shadow:0 0 5px #333;
|
||||
}
|
||||
#hooks div.hook.cancel {
|
||||
background-position: -4px -132px;
|
||||
}
|
||||
#hooks_chart .plot.hover,
|
||||
#hooks div.hook.hover {
|
||||
#hooks_chart .plot:hover {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
#hooks_chart .plot.hover,
|
||||
#hooks div.hook.hover,
|
||||
#hooks_chart .plot:hover,
|
||||
#hooks_wrap > a.no_hook:hover {
|
||||
box-shadow: 0 0 9px #d85000;
|
||||
box-shadow: 0 0 9px #d85000 !important;
|
||||
}
|
||||
#hooks div.hook a {
|
||||
color: #444;
|
||||
}
|
||||
#hooks a.action {
|
||||
display: none;
|
||||
}
|
||||
#hooks div.hook .opponent {
|
||||
#powerTip.hook .opponent {
|
||||
border-radius: 3px 3px 0 0;
|
||||
display: block;
|
||||
height: 20px;
|
||||
|
|
@ -1481,14 +1560,14 @@ div.game_config div.color_submits button.random span {
|
|||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
}
|
||||
#hooks div.hook a.opponent:hover {
|
||||
#powerTip.hook a.opponent:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#hooks .clearfix {
|
||||
#powerTip.hook .clearfix {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
#hooks .elo, #hooks .clock {
|
||||
#powerTip.hook .elo, #powerTip.hook .clock {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
|
|
@ -1496,31 +1575,31 @@ div.game_config div.color_submits button.random span {
|
|||
font-size: 1.25em;
|
||||
font-weight: bold;
|
||||
}
|
||||
#hooks .elo {
|
||||
#powerTip.hook .elo {
|
||||
float: right;
|
||||
color: #bbb;
|
||||
background: #666;
|
||||
}
|
||||
#hooks .clock {
|
||||
#powerTip.hook .clock {
|
||||
float: left;
|
||||
color: #555;
|
||||
}
|
||||
#hooks .clock > span {
|
||||
#powerTip.hook .clock > span {
|
||||
color: #909090;
|
||||
}
|
||||
#hooks .clock.nope {
|
||||
#powerTip.hook .clock.nope {
|
||||
font-size: 2.3em;
|
||||
padding-top: 3px;
|
||||
line-height: 20px;
|
||||
}
|
||||
#hooks .mode {
|
||||
#powerTip.hook .mode {
|
||||
margin-top: 40px;
|
||||
}
|
||||
#hooks .mode, #hooks .chess960 {
|
||||
#powerTip.hook .mode, #powerTip.hook .chess960 {
|
||||
font-size: 1.25em;
|
||||
display: block;
|
||||
}
|
||||
#hooks .color {
|
||||
#powerTip.hook .color {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
|
|
@ -1529,10 +1608,10 @@ div.game_config div.color_submits button.random span {
|
|||
height: 16px;
|
||||
background-position: 0 -240px;
|
||||
}
|
||||
#hooks .color.black {
|
||||
#powerTip.hook .color.black {
|
||||
background-position: 0 -256px;
|
||||
}
|
||||
#hooks .engine {
|
||||
#powerTip.hook .engine {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
|
|
@ -1794,104 +1873,6 @@ div.relation_actions .icon span {
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
#powerTip {
|
||||
width: 240px;
|
||||
min-height: 6em;
|
||||
cursor: default;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #c0c0c0;
|
||||
border-radius: 4px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 2147483647;
|
||||
}
|
||||
#powerTip > .title {
|
||||
padding: 8px;
|
||||
border-bottom: 1px solid #c0c0c0;
|
||||
}
|
||||
#powerTip > .content {
|
||||
text-align: right;
|
||||
padding: 16px 8px;
|
||||
}
|
||||
#powerTip:before {
|
||||
content:"";
|
||||
position: absolute;
|
||||
}
|
||||
#powerTip.n:before, #powerTip.s:before {
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
}
|
||||
#powerTip.e:before, #powerTip.w:before {
|
||||
border-bottom: 5px solid transparent;
|
||||
border-top: 5px solid transparent;
|
||||
margin-top: -5px;
|
||||
top: 50%;
|
||||
}
|
||||
#powerTip.n:before {
|
||||
border-top: 10px solid #acacac;
|
||||
border-top: 10px solid rgba(172, 172, 172, 0.8);
|
||||
bottom: -10px;
|
||||
}
|
||||
#powerTip.e:before {
|
||||
border-right: 10px solid #acacac;
|
||||
border-right: 10px solid rgba(172, 172, 172, 0.8);
|
||||
left: -10px;
|
||||
}
|
||||
#powerTip.s:before {
|
||||
border-bottom: 10px solid #acacac;
|
||||
border-bottom: 10px solid rgba(172, 172, 172, 0.8);
|
||||
top: -10px;
|
||||
}
|
||||
#powerTip.w:before {
|
||||
border-left: 10px solid #acacac;
|
||||
border-left: 10px solid rgba(172, 172, 172, 0.8);
|
||||
right: -10px;
|
||||
}
|
||||
#powerTip.ne:before, #powerTip.se:before {
|
||||
border-right: 10px solid transparent;
|
||||
border-left: 0;
|
||||
left: 10px;
|
||||
}
|
||||
#powerTip.nw:before, #powerTip.sw:before {
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 0;
|
||||
right: 10px;
|
||||
}
|
||||
#powerTip.ne:before, #powerTip.nw:before {
|
||||
border-top: 10px solid #acacac;
|
||||
border-top: 10px solid rgba(172, 172, 172, 0.8);
|
||||
bottom: -10px;
|
||||
}
|
||||
#powerTip.se:before, #powerTip.sw:before {
|
||||
border-bottom: 10px solid #acacac;
|
||||
border-bottom: 10px solid rgba(172, 172, 172, 0.8);
|
||||
top: -10px;
|
||||
}
|
||||
#powerTip.nw-alt:before, #powerTip.ne-alt:before, #powerTip.sw-alt:before, #powerTip.se-alt:before {
|
||||
border-top: 10px solid #acacac;
|
||||
border-top: 10px solid rgba(172, 172, 172, 0.8);
|
||||
bottom: -10px;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
left: 10px;
|
||||
}
|
||||
#powerTip.ne-alt:before {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
#powerTip.sw-alt:before, #powerTip.se-alt:before {
|
||||
border-top: none;
|
||||
border-bottom: 10px solid #acacac;
|
||||
border-bottom: 10px solid rgba(172, 172, 172, 0.8);
|
||||
bottom: auto;
|
||||
top: -10px;
|
||||
}
|
||||
#powerTip.se-alt:before {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
#powerTip.messages {
|
||||
width: 400px;
|
||||
padding: 1em;
|
||||
|
|
|
|||
|
|
@ -264,8 +264,7 @@ body.dark #lichess_forum div.post .message,
|
|||
body.dark #lichess_message div.thread_message div.thread_message_body,
|
||||
body.dark #GameText a.move,
|
||||
body.dark form.translation_form div.message label,
|
||||
body.dark div.content_box h1,
|
||||
body.dark #hooks a
|
||||
body.dark div.content_box h1
|
||||
{
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
|
@ -369,8 +368,14 @@ body.dark #top a.goto_nav.current {
|
|||
background: -ms-linear-gradient(top , #808080, #606060) repeat scroll 0 0 #606060;
|
||||
background: -o-linear-gradient(top , #808080, #606060) repeat scroll 0 0 #606060;
|
||||
}
|
||||
body.dark #hooks_chart {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
body.dark #hooks_chart .plot {
|
||||
box-shadow: 0 0 5px #000;
|
||||
}
|
||||
body.dark #hooks_chart > span.label {
|
||||
text-shadow: 0 0 3px #000;
|
||||
}
|
||||
body.dark #powerTip.hook {
|
||||
background: #d0d0d0 url(../images/play128.png) -4px -4px;
|
||||
}
|
||||
body.dark .s16.ddown {
|
||||
background-position: right -368px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue