/*!
 * Copyright (C) 2010-2013 Kaj Magnus Lindberg
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

// Styles that could be reused if building something for Node.js or WordPress.



// SVG arrows  — no, takes long to render, degrades performance
//===========================
/*

.dw-t svg
  position: absolute
  top: 0
  left: 0
  height: 100% // or Opera, only Opera, sets 150px, no idea why
  width: 100% // perhaps some future version of Opera will break otherwise

.dw-svg-parent > :not(svg) // [31Ik53]
  z-index: 2 // or would not be clickable; <svg> would be above
  position: relative // or z-index has no effect

.dw-t svg path
  fill: none
  // Warning: stroke color also specified in debiki.js, $highlightOff().
  stroke: #dbdbdb
  stroke-width: 3

// This doesn't work; cannot add class dw-highlight to a <path> at runtime.
// COULD style an invisible elem in this manner, and read the props via
// JavaScript. Then I can still place all CSS stuff in this file.
//.dw-t svg path.dw-highlight {
//  stroke-width: 4;
//  stroke: #f0a005;
//}
*/


// PNG arrows
//===========================

// The arrow images are in (root)/images/web/ty-media/arrows/. [NGXMEDIA]

.dw-arw-hz-line-to-this,
.dw-arw-hz-line-to-sibling,
.dw-arw-vt-line-to-sibling-1,
.dw-arw-vt-line-to-sibling-2,
.dw-arw-vt-curve-to-last-sibling-unindented,
.dw-arw-vt-curve-to-last-sibling-indented
  background-color: #ddd
  position: absolute
  z-index: 1

.dw-arw-vt-line-to-sibling-1,
.dw-arw-vt-line-to-sibling-2
  height: 100%
  width: 3px
  left: 4px

.dw-arw-vt-line-to-sibling-1
  top: -31px
  height: 31px

.dw-arw-hz-line-to-this,
.dw-arw-hz-line-to-sibling
  top: -61px
  height: 3px

.dw-arw-hz-line-to-this
  left: -60px
  width: 60px

.dw-arw-hz-line-to-sibling
  left: 0
  width: 100%

.dw-arw-vt-curve-to-this,
.dw-arw-vt-curve-to-last-sibling-indented
  position: absolute
  background-color: transparent
  background: url("/-/media/arrows/arrows-etcetera-gray.png") no-repeat -33px -228px
  width: 33px
  left: 1px
  top: -24px
  height: 34px

// Curve from the last-but-one reply to the last reply (non-multireply)
.dw-arw-vt-curve-to-last-sibling-unindented
  left: 4px
  bottom: 0
  width: 18px
  height: 53px
  padding-bottom: 10px; // or vertical line would be visible below
  background: url("/-/media/arrows/arrows-etcetera-gray.png") no-repeat -57px -79px

// Same as above, but when the last sibling is indented.
.dw-arw-vt-curve-to-last-sibling-indented
  top: auto
  bottom: -12px
  background-color: white


.dw-arw-vt-curve-to-this-first-unindented,
li:only-child > .dw-arw-vt-curve-to-this
  position: absolute
  top: -49px;
  width: 15px;
  height: 23px;
  left: -1px !important;
  background: url("/-/media/arrows/arrows-etcetera-gray.png") no-repeat -59px -146px;

html.touch
  .dw-arw-vt-curve-to-this-first-unindented,
  li:only-child > .dw-arw-vt-curve-to-this
    top: -38px;
    width: 15px;
    height: 30px;
    left: -2px !important;
    background: url("/-/media/arrows/arrows-etcetera-gray.png") no-repeat -59px -141px;

// Sometimes the last/only child is indented: in single column layout, replies
// to article replies are always indented. Then we need an arrow for indented
// comments:
.dw-depth-0:not(.dw-hz) > .dw-single-and-multireplies > .dw-res > li > .dw-t > .dw-single-and-multireplies > .dw-res > .dw-t:last-child > .dw-arw-vt-curve-to-this
  background: url("/-/media/arrows/arrows-etcetera-gray.png") no-repeat -33px -228px
  left: 1px
  top: -25px
  width: 25px;
  height: 34px

// Tweak offset for arrows to collapsed replies (there's no .dw-t
// that "adjusts" the offset)
.dw-res.dw-zd .dw-arw-vt-curve-to-this
  left: -39px
  top: -50px
  // Hide vertical arrow — there're no more replies below;
  // all replies are collapsed.
  z-index: 2

.dw-res.dw-zd
  position: relative

.dw-hz > .dw-single-and-multireplies > .dw-res > li:last-child > .dw-t > .dw-arw-hz-curve-to-this,
.dw-res > .dw-t:last-child > .dw-arw-vt-curve-to-this
  // Hide parts of the end of the horizontal or vertical line that spans
  // all child threads, by placing this arrow's background on top.
  // (The rest of the line is hiddenb by .dw-arw-vt-hide-line-from-parent
  // and certain .dw-svg-fake-harrow:s.) Ooops it's been removed! rewrote.
  z-index: 2

.dw-arw-hz-curve-to-this,
.dw-arw-hz-branch-to-reply-btn
  background: transparent url("/-/media/arrows/arrows-etcetera-gray.png") no-repeat 0 0
  position: absolute
  top: -63px
  left: -61px
  height: 34px
  width: 61px

.dw-arw-hz-branch-to-reply-btn,
.dw-arw-hz-curve-to-reply-btn
  background: url("/-/media/arrows/arrows-etcetera-gray.png") no-repeat 0 -79px
  position: absolute
  top: 7px
  left: 0px
  height: 72px
  width: 57px
  z-index: 2

.dw-arw-hz-curve-to-reply-btn
  background: url("/-/media/arrows/arrows-etcetera-gray.png") no-repeat 0 -152px
  height: 72px
  width: 38px


// For horizontal reply forms: An arrow to any replies to the right...
li.dw-fs-re:not(:last-child) .dw-arw-hz-line-to-sibling
  top: -39.5px

// ... But only show that arrow if horizontal layout ...
.dw-t:not(.dw-hz) > .dw-single-and-multireplies > .dw-res > .dw-fs-re .dw-arw
  display: none

// ... and if there're replies to the right.
li.dw-fs-re:last-child .dw-arw-hz-line-to-sibling
  display: none

// One clicks this wide handle, instead of the narrow and hard to click arrow, to
// scroll to the parent thread.
.dw-arw-vt-handle
  position: absolute
  top: -9px; // fillls the gap between two handles, sometimes causing a tiny overlap unfortunately
  bottom: 0;
  left: -3px;
  width: 35px;
  cursor: pointer; // click it –> shows parent post
  background: transparent;
  z-index: 11;

  &.dw-highlight
    background: hsl($uiHue, 100%, 70%);
    opacity: 0.14;

// vim: fdm=marker et ts=2 sw=2 tw=80 fo=tcqwn list
