/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Only apply to browser.xul documents */
@-moz-document url("chrome://browser/content/browser.xul") {
  /*
     XXX Copied from browser/themes/<platform>/browser.css. Should really be
     changing the sizes of icons in files to 16px x 16px and no borders.
   */
  :-moz-any(toolbar, .widget-overflow-list) #loop-button > .toolbarbutton-icon,
  :-moz-any(toolbar, .widget-overflow-list) #loop-button > :-moz-any(.toolbarbutton-menubutton-button, .toolbarbutton-badge-stack) > .toolbarbutton-icon {
    max-width: 16px;
    margin: 0;
  }

  #loop-button {
    list-style-image: url(chrome://loop/skin/toolbar.png);
    -moz-image-region: rect(0, 16px, 16px, 0);
  }

  toolbar[brighttext] #loop-button {
    list-style-image: url(chrome://loop/skin/toolbar-inverted.png);
  }

  #loop-button[state="disabled"],
  #loop-button[disabled="true"] {
    -moz-image-region: rect(0, 32px, 16px, 16px);
  }

  #loop-button:not([disabled="true"])[state="error"] {
    -moz-image-region: rect(0, 48px, 16px, 32px);
  }

  #loop-button:not([disabled="true"])[state="action"] {
    -moz-image-region: rect(0, 64px, 16px, 48px);
  }

  #loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
    -moz-image-region: rect(0, 80px, 16px, 64px);
  }

  #loop-button:not([disabled="true"])[state="active"] {
    -moz-image-region: rect(0, 96px, 16px, 80px);
  }

  #loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
    -moz-image-region: rect(0, 112px, 16px, 96px);
  }

  /* The slideshow state disables the button for that window and makes it look
     the same as the hover state to visually indicate that it's in-use.
     */
  #loop-button[state="slideshow"] {
    background: var(--toolbarbutton-hover-background);
    border-color: var(--toolbarbutton-hover-bordercolor);
    box-shadow: var(--toolbarbutton-hover-boxshadow);
  }

  @media (min-resolution: 1.1dppx) {
    #loop-button {
      list-style-image: url("chrome://loop/skin/toolbar@2x.png");
      -moz-image-region: rect(0, 32px, 32px, 0);
    }

    toolbar[brighttext] #loop-button {
      list-style-image: url("chrome://loop/skin/toolbar-inverted@2x.png");
    }

    #loop-button[state="disabled"],
    #loop-button[disabled="true"] {
      -moz-image-region: rect(0, 64px, 32px, 32px);
    }

    #loop-button:not([disabled="true"])[state="error"] {
      -moz-image-region: rect(0, 96px, 32px, 64px);
    }

    #loop-button:not([disabled="true"])[state="action"] {
      -moz-image-region: rect(0, 128px, 32px, 96px);
    }

    #loop-button:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
      -moz-image-region: rect(0, 160px, 32px, 128px);
    }

    #loop-button:not([disabled="true"])[state="active"] {
      -moz-image-region: rect(0, 192px, 32px, 160px);
    }

    #loop-button:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
      -moz-image-region: rect(0, 224px, 32px, 192px);
    }

    #loop-button[cui-areatype="menu-panel"],
    toolbarpaletteitem[place="palette"] > #loop-button {
      list-style-image: url(chrome://loop/skin/menuPanel@2x.png);
      -moz-image-region: rect(0, 64px, 64px, 0);
    }

    /* Make sure that the state icons are not shown in the customization palette. */
    toolbarpaletteitem[place="palette"] > #loop-button {
      -moz-image-region: rect(0, 64px, 64px, 0);
    }

    #loop-button[cui-areatype="menu-panel"][state="disabled"],
    #loop-button[cui-areatype="menu-panel"][disabled="true"] {
      -moz-image-region: rect(0, 128px, 64px, 64px);
    }

    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
      -moz-image-region: rect(0, 192px, 64px, 128px);
    }

    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
      -moz-image-region: rect(0, 256px, 64px, 192px);
    }

    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
      -moz-image-region: rect(0, 320px, 64px, 256px);
    }

    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
      -moz-image-region: rect(0, 384px, 64px, 320px);
    }

    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
      -moz-image-region: rect(0, 448px, 64px, 384px);
    }
  }

  @media not all and (min-resolution: 1.1dppx) {
    #loop-button[cui-areatype="menu-panel"],
    toolbarpaletteitem[place="palette"] > #loop-button {
      list-style-image: url(chrome://loop/skin/menuPanel.png);
      -moz-image-region: rect(0, 32px, 32px, 0);
    }

    /* Make sure that the state icons are not shown in the customization palette. */
    toolbarpaletteitem[place="palette"] > #loop-button {
      -moz-image-region: rect(0, 32px, 32px, 0);
    }

    #loop-button[cui-areatype="menu-panel"][state="disabled"],
    #loop-button[cui-areatype="menu-panel"][disabled="true"] {
      -moz-image-region: rect(0, 64px, 32px, 32px);
    }

    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
      -moz-image-region: rect(0, 96px, 32px, 64px);
    }

    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
      -moz-image-region: rect(0, 128px, 32px, 96px);
    }

    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"]:-moz-any(:hover,:hover:active,[open]) {
      -moz-image-region: rect(0, 160px, 32px, 128px);
    }

    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
      -moz-image-region: rect(0, 192px, 32px, 160px);
    }

    #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"]:-moz-any(:hover,:hover:active,[open]) {
      -moz-image-region: rect(0, 224px, 32px, 192px);
    }
  }

  notification[value="loop-sharing-notification"] {
    -moz-appearance: none;
    height: 40px;
    background-color: #00a9dc;
    box-shadow: 0 -1px 1px rgba(0,0,0,.4) inset;
  }

  notification[value="loop-sharing-notification"].paused {
    background-color: #ebebeb;
  }

  notification[value="loop-sharing-notification"] .notification-inner {
    color: #fff;
    padding: 0;
  }

  notification[value="loop-sharing-notification"].paused .notification-inner {
    color: #00a9dc;
  }

  notification[value="loop-sharing-notification"] .notification-inner description {
    padding-top: .2rem;
    padding-bottom: .4rem;
  }

  notification[value="loop-sharing-notification"] .notification-button {
    -moz-appearance: none;
    background-color: #fff;
    border: 0;
    padding: .2rem 1rem .4rem;
    height: 40px;
    margin: 0;
    list-style-image: url(chrome://loop/content/shared/img/pause-12x12.svg);
    box-shadow: 0 -1px 1px rgba(0,0,0,.5) inset;
    text-shadow: none;
  }

  notification[value="loop-sharing-notification"].paused .notification-button {
    background-color: #57bd35;
    color: #fff;
    list-style-image: url(chrome://loop/content/shared/img/play-12x12.svg);
  }

  notification[value="loop-sharing-notification"].paused .notification-button:hover {
    background-color: #39a017;
  }

  notification[value="loop-sharing-notification"] .notification-button:hover,
  notification[value="loop-sharing-notification"].paused .notification-button-default:hover {
    background-color: #ebebeb;
  }

  notification[value="loop-sharing-notification"] .notification-button-default,
  notification[value="loop-sharing-notification"].paused .notification-button-default {
    color: #d92215;
    background-color: #fff;
    list-style-image: url(chrome://loop/content/shared/img/stop-12x12.svg);
  }

  notification[value="loop-sharing-notification"] .notification-button .button-icon {
    display: block;
    -moz-margin-end: 6px;
  }

  notification[value="loop-sharing-notification"] .button-menubutton-button {
    min-width: 0;
  }

  notification[value="loop-sharing-notification"] .messageImage {
    list-style-image: url(chrome://loop/content/shared/img/icons-16x16.svg#loop-icon-white);
    margin-inline-start: 14px;
    margin-bottom: .2rem;
  }

  notification[value="loop-sharing-notification"].paused .messageImage {
    list-style-image: url(chrome://loop/content/shared/img/icons-16x16.svg#loop-icon-still);
  }

  notification[value="loop-sharing-notification"] .close-icon {
    display: none;
  }

  chatbox[src^="about:loopconversation#"] > .chat-titlebar {
    background-color: #00a9dc;
    border-color: #00a9dc;
  }

  chatbox[src^="about:loopconversation#"] .chat-title {
    color: white;
  }

  chatbox[src^="about:loopconversation#"] .chat-minimize-button {
    list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-white");
  }

  chatbox[src^="about:loopconversation#"] .chat-swap-button {
    list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-white");
  }

  .chat-loop-hangup {
    list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white");
    background-color: #d13f1a;
    border: 1px solid #d13f1a;
    border-top-right-radius: 4px;
    width: 32px;
    height: 26px;
    margin-top: -6px;
    margin-bottom: -5px;
    -moz-margin-start: 6px;
    -moz-margin-end: -5px;
  }

  .chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover,:hover:active) {
    background-color: #ef6745;
    border-color: #ef6745;
  }

  #loop-slideshow-container {
    /* cover the entire viewport, mouse interaction with non-slideshow
      content is now impossible. */
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;

    /* darken the background content */
    background: rgba(0, 0, 0, .8);
  }

  #loop-slideshow-browser {
    width: 620px;
    height:450px;
    margin-top: 10%;

    /* XXX derived from width, so should be 50% - (620px / 2)? */
    -moz-margin-start: calc(50% - 310px);
  }

  /****************************************************************/
  /* REMOTE CURSOR (keep synced with remote-cursor in common.css) */
  /****************************************************************/

  #loop-remote-cursor-container {
    position: absolute;
    pointer-events: none;
    /* Hide overflow so that when the tail of the pointer gets to the edge
     * of shared area, it doesn't widen the viewport by adding a scrollbar.
     */
    overflow: hidden;
  }

  #loop-remote-cursor {
    background: url("chrome://loop/content/shared/img/cursor.svg#blue") no-repeat;
    height: 20px;
    width: 15px;
    /*
     * Svg cursor has a white outline so we need to get rid off it to ensure
     * that the cursor points at a more precise position
     */
    margin: -2px;
    pointer-events: none;
    position: absolute;
  }

  #loop-remote-cursor:after,
  #loop-remote-cursor:before {
    background-color: rgba(0,169,220,0.5);
    border-radius: 50%;
    content: "";
    height: 50px;
    left: 50%;
    margin: -35px 0 0 -35px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    width: 50px;
    z-index: -1;
  }

  @keyframes double-pulse-1 {
    0% {
      opacity: 1;
      transform: scale3d(0.1, 0.1, 1);
    }
    100% {
      opacity: 0;
      transform: scale3d(1.1, 1.1, 1);
    }
  }

  @keyframes double-pulse-2 {
    0% {
      opacity: 1;
      transform: scale3d(0.5, 0.5, 1);
    }
    50%, 100% {
      opacity: 0;
      transform: scale3d(1.2, 1.2, 1);
    }
  }

  #loop-remote-cursor.clicked::after {
    animation: double-pulse-1 800ms ease-out forwards;
  }

  #loop-remote-cursor.clicked::before {
    animation: double-pulse-2 800ms ease-out forwards;
  }
}
