more precise handling of destination/highlight settings

This commit is contained in:
Thibault Duplessis 2014-10-19 23:22:36 +02:00
parent 98b7a7a12e
commit c432360a42
2 changed files with 7 additions and 6 deletions

View file

@ -39,13 +39,14 @@ openGraph: Map[Symbol, String] = Map.empty)(body: Html)(implicit ctx: Context)
<link href="@routes.Blog.atom()" type="application/atom+xml" rel="alternate" title="Latest blog posts" />
@langAnnotations
</head>
<body class="@List(
<body class="base @List(
ctx.currentTheme.cssClass,
ctx.currentTheme3d.cssClass,
ctx.currentBg,
ctx.currentPieceSet,
ctx.currentPieceSet3d,
ctx.pref.highlight ?? "highlight",
ctx.pref.destination ?? "destination",
ctx.blindMode ?? "blind_mode",
if (ctx.is3d) "is3d" else "is2d",
"coords_" + ctx.pref.coords).mkString(" ")"

View file

@ -83,11 +83,11 @@ body.highlight .manipulable .cg-square:hover,
body.highlight .manipulable .cg-square.drag-over {
background: rgba(255, 255, 255, 0.1);
}
.cg-board .cg-square.move-dest {
body.destination .cg-board .cg-square.move-dest {
background: radial-gradient(rgba(20, 85, 30, 0.3) 22%, #208530 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0);
cursor: pointer;
}
.cg-board .cg-square.occupied.move-dest {
body.destination .cg-board .cg-square.occupied.move-dest {
background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 85, 0, 0.3) 80%);
}
/* .cg-square.occupied.move-dest .cg-piece::after { */
@ -97,10 +97,10 @@ body.highlight .manipulable .cg-square.drag-over {
/* height: 100%; */
/* background: radial-gradient(rgba(20, 85, 30, 0.5) 22%, #208530 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0); */
/* } */
.cg-board .cg-square.premove-dest {
body.destination .cg-board .cg-square.premove-dest {
background: radial-gradient(rgba(20, 30, 85, 0.3) 22%, #203085 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0);
}
.cg-board .cg-square.occupied.premove-dest {
body.destination .cg-board .cg-square.occupied.premove-dest {
background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 30, 85, 0.3) 80%);
}
body.highlight .cg-board .cg-square.move-dest.drag-over,
@ -115,7 +115,7 @@ body.highlight .cg-board .cg-square.premove-dest:hover {
/* .cg-square.move-dest:hover .cg-piece::after { */
/* background: none; */
/* } */
body .cg-board .cg-square.selected {
body.base .cg-board .cg-square.selected {
background-color: rgba(20, 85, 30, 0.5);
}
body.highlight .cg-board .cg-square.last-move {