/*!
 * Copyright (C) 2010-2013 Kaj Magnus Lindberg (born 1979)
 *
 * 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/>.
 */


// React
//===========================

.modal .dw-no-borders
  .modal-header
    border-bottom: none;
  .modal-footer
    border-top: none;

@media (max-width: 430px)
  .fade.in.modal
    padding-left: 0;  // instead of 15px
  .modal-body
    padding: 15px;

@media (max-width: 370px)
  .modal-body
    padding: 10px;


// React-select
//===========================

.Select--multi .Select-value
  background-color: hsla($uiHue, 100%, 55%, 0.08);
  border-color: hsla($uiHue, 100%, 50%, 0.24);
  color: hsl($uiHue, 100%, 45%);

// Add 1px more padding –> easier to touch.
.Select--multi .Select-value-label,
.Select--multi .Select-value-icon
  padding: 2px 6px;

// This one is broken now, after react-select has been upgraded?
.Select-control
  border-color: hsl(0, 0%, 90%) hsl(0, 0%, 83%) hsl(0, 0%, 80%);

// Does this one work?
.Select-option.is-focused
  background-color: hsl($uiHue, 80%, 97%);
  color: hsl($uiHue, 100%, 23%);

// Works.
// Make option texts darker so easier to read.
.Select-option
  color: hsl($uiHue, 50%, 28%);
.Select-option.is-disabled
  color: hsl(0, 0%, 60%);

// Make the select-item dropdown push the stuff below downwards, so that stuff remains visible
// instead of getting hidden by the dropdown.
.Select-menu-outer
  position: relative; // instead of absolute


// React-textarea-autocomplete
//===========================

.rta__entity
  cursor: pointer;

.rta__autocomplete
  z-index: 1;

.rta__list
  border: 1px solid hsl(0, 0%, 87%);
  box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.45);
  .rta__item
    margin: 0.4em 0.6em;
  .rta__entity
    padding: 3px 1px 3px 10px;
  .rta__entity--selected
    background: hsl($uiHue, 98%, 41%);


// The Stupid Lightbox
//===========================

// The Stupid Lightbox enlarges images in posts on click, so indicate that they're clickable.
.dw-p-bd img.stupid-lightbox-enlargeable:hover
  outline: 2px solid hsl($uiHue, 100%, 83%);
  cursor: pointer;
  cursor: zoom-in; // better, if supported
  box-shadow: hsl($uiHue, 70%, 60%) 2px 2px 13px !important;

.stupid-lightbox-wrap
  cursor: zoom-out;

.stupid-lightbox-close
  position: absolute;
  right: 0;
  color: white;
  font-size: 6.6vh;
  cursor: pointer;
  background: #333; // eles not visible on white image
  z-index: 1;
  line-height: 0.95;
  padding-bottom: 3px;
  &:before
    content: '\e836'; // = icon-cancel, an  x
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: none;
    width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;


// Fontello
//===========================

// Dummy icon that makes a character behave a bit like a Fontello icon.
.icon-char,
.icon-chat:before  // a char too, see .icon-chat:before below
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;

// Slack and Discord uses '#' for chat channels. So let's do that?
.icon-chat:before
  content: '#';
  font-size: 125%;
  position: relative;
  top: 2px;
  width: auto;
  padding: 0;

// In addition to .icon-check and .icon-check-empty, for ideas/problems in status Planned:
.icon-check-dashed:before
  content: ' ';
  border: 1px dashed hsl(0, 0%, 43%);
  border-radius: 3px;
  display: inline-block;
  position: relative;
  top: 0.2ex;
  margin: 0 0.5ex;
  padding: 0.55ex 0.5ex;

.icon-unlisted:before,
.icon-2x-unlisted:before
  content: '\e814';  // same as .icon-menu: '☰' looks like a list.
  // Draw a line through the list, to show the -whatever- is *un*listed.
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M77 0 L23 100 ' stroke='%235a5a5a' stroke-width='12'/></svg>");
  background-repeat: no-repeat;
  background-position: center center;

.icon-2x-unlisted:before
  // Draw a cross over the list.
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M75 0 L25 100 ' stroke='%235c5c5c' stroke-width='12'/><path d='M25 0 L75 100 ' stroke='%235c5c5c' stroke-width='12'/></svg>");
  // Draw double lines through the list. No, hard to see the difference between 2 lines and just 1 line.
  //background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M56 0 L10 100' stroke='%235a5a5a' stroke-width='11'/><path d='M90 0 L44 100' stroke='%235a5a5a' stroke-width='11'/></svg>");



// Twitter Bootstrap
//===========================

// Cancel Bootstrap's 20px padding
body
  padding: 0 !important;


// (Perhaps build own Bootstrap version and change the styles there? But Bootstrap uses LESS
// not Stylus — would lead to dupl variables?)

// Cancel .icon 14px width — I'm using Fontello's icons, instead of Twitter's.
// There are some other icon styles that Bootstrap applies and that could be
// cancelled here — what should be done, in fact, is to build Bootstrap
// and comment out:  @import "./bootstrap/less/sprites.less
// see http://drupal.org/node/1949992
.DW [class^="icon-"],
.DW [class*=" icon-"]
  width: auto

kbd
  background: none;
  color: #111;
  box-shadow: none;

.btn
  border-radius: 0;

a.btn-default
  color: #333; // otherwise LinkButton would have blue text [2GKR5L0]

.btn-primary,
.btn-primary:link,
.nav-pills > li > a.active,
.nav-pills > li > a.active:hover,
.nav-pills > li > a.active:focus,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.nav > .active
  border-radius: 0;
  background-color: hsl($uiHue, 77%, 53%);
  border-color: hsl($uiHue, 77%, 53%);
  color: white;
  &:visited
    color: white;

// ...but in a nav with background, use stronger color:
.dw-sub-nav
  .btn-primary,
  &.nav-stacked .nav-pills > li.active > a,
  &.nav-stacked .nav-pills > li.active > a:hover,
  &.nav-stacked .nav-pills > li.active > a:focus
    border-radius: 0;
    color: white !important;
    background: hsl($uiHue, 90%, 50%);
    font-weight: bold;

// Make buttons darker on hover.
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary
  background-color: hsl($uiHue, 77%, 40%);
  border-color: hsl($uiHue, 77%, 40%);

.nav-pills > li > a
  border-radius: 0;

.btn:focus,
.btn:active:focus,
.btn.active:focus
  outline-color: hsl($uiHue, 99%, 65%);


.nav > :first-child
  margin-left: 0;

.nav:not(.nav-stacked) > li
  margin-bottom: 0;

.nav-stacked li
  margin-left: 0 !important; // why Bootstrap sets 2px?

.nav > li > a
  padding-top: 8px;
  padding-bottom: 8px;

// Undo .dropdown-menu li a  nowrap:   (Or always remove nowrap?: [.twbs_menu_item_wrap] )
.dropdown-menu > li.s_Hz > a
  white-space: normal;

// Without this, the menu items start extending outside the screen, when too narrow.
@media (max-width: 330px)
  .dropdown-menu > li > a
    word-break: break-all;

input, textarea {
  /* Disable annoyingly slow Twitter Bootstrap transitions.
  Alternatively, change from 0.2s to 0.05s. */
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}

// Make a new modal hide all older modals, by setting backdrop z-index to the same as
// the z-index for the modal dialog and content (rather than using 1040 which results in
// older modals still being in the foreground because their content z-index is 1050).
.modal-backdrop
  z-index: 1050;

// Make dialogs slightly wider.
@media (min-width: $modalDialogBreakpoint)
  .modal-dialog
    width: 630px;  // else 600, Bootstrap's default

// If we're in some popup or small win, better show scrollbars if needed.  [e2e_win_size]
// Does it make sense to show only in small wins?
// Like so: @media (max-height: 1000px)
.modal .modal-content
  overflow-y: auto;

// Scrollbars appear sometimes although not needed, in the editor dialog, when full screen,
// and opening the category dropdown. (Sep 2016)
.modal.fade.in
  overflow: auto;

.dropdown-menu > li
  margin: 0 5px;
  &:first-child
    margin-top: 3px;
  &:last-child
    margin-bottom: 7px;
  a
    padding: 10px 20px;  // [dropdown_a_padding]
    // Use the same color as in node_modules/bootstrap/dist/css/bootstrap.css,
    // but for all descendant 'a', not only '> a'.
    color: #333;
    &:hover,  // Bootstrap has: .dropdown-menu > li > a:hover,  and :focus
    &:focus
      color: #262626;
      text-decoration: none;
      background-color: #f5f5f5;

  & > a
    // Cancel nowrap?  [.twbs_menu_item_wrap]
    white-space: inherit;

  // Horizontal layout for many links on the same row.
  &.s_Hz
    display: flex;
    margin-top: 0;
    justify-content: flex-end;
    > :first-child
      margin-right: auto;


// Change active dropdown menu items from white-text-on-blue, to black-on-light-blue.
.dropdown-menu > .active
  > a,
  > a:hover,
  > a:focus
    outline: 0;
    color: hsl(207, 0%, 16%);
    background-color: hsl(207, 94%, 91%);

html.touch .dropdown-menu > li
  margin: 20px 0 15px 0;
  &:first-child
    margin-top: 13px;

.alert-info
  color: hsl($uiHue, 57%, 22%);
  background-color: hsl($uiHue, 65%, 94.4%);
  border-color: hsl($uiHue, 65%, 87%);
  border-radius: 0;

.alert-warning
  color: hsl(50, 40%, 22%);  // or too little contrast
  background-color: hsl(50, 81%, 93%);  // or too bright, hard to notice

// From http://twitter.github.com/bootstrap/assets/css/bootstrap.css,
// 2012-03-21, v.2.0.2.
.tooltip
  position: absolute
  z-index: 1020
  display: block
  visibility: visible
  padding: 5px
  font-size: 11px
  opacity: 0
  // This line results in: "TypeError: expected rgba or hsla, but got unit:0".
  // It was generated by `stylus --css ...`, i.e. when I converted from CSS to Stylues.
  //filter: alpha(opacity=0)

.tooltip.in
  opacity: 0.8
  //filter: alpha(opacity=80) // --> TypeError: expected rgba or hsla, but got unit:0

.tooltip.top
  margin-top: -2px

.tooltip.right
  margin-left: 2px

.tooltip.bottom
  margin-top: 2px

.tooltip.left
  margin-left: -2px

.tooltip.top .tooltip-arrow
  bottom: 0
  left: 50%
  margin-left: -5px
  border-left: 5px solid transparent
  border-right: 5px solid transparent
  border-top: 5px solid #000000

.tooltip.left .tooltip-arrow
  top: 50%
  right: 0
  margin-top: -5px
  border-top: 5px solid transparent
  border-bottom: 5px solid transparent
  border-left: 5px solid #000000

.tooltip.bottom .tooltip-arrow
  top: 0
  left: 50%
  margin-left: -5px
  border-left: 5px solid transparent
  border-right: 5px solid transparent
  border-bottom: 5px solid #000000

.tooltip.right .tooltip-arrow
  top: 50%
  left: 0
  margin-top: -5px
  border-top: 5px solid transparent
  border-bottom: 5px solid transparent
  border-right: 5px solid #000000

.tooltip-inner
  max-width: 200px
  padding: 3px 8px
  color: #ffffff
  text-align: center
  text-decoration: none
  background-color: #000000
  -webkit-border-radius: 4px
  -moz-border-radius: 4px
  border-radius: 4px

.tooltip-arrow
  position: absolute
  width: 0
  height: 0

// [kajmagnus@debiki] Workarounds.
.tooltip
  // Otherwise Chrome makes it very thin, when outside browser window,
  // so the tip arrow gets offset incorrectly:
  width: 500px


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