Xinwen Deng / aem-src

/*
 * ADOBE CONFIDENTIAL
 *
 * Copyright 2015 Adobe Systems Incorporated
 * All Rights Reserved.
 *
 * NOTICE:  All information contained herein is, and remains
 * the property of Adobe Systems Incorporated and its suppliers,
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to Adobe Systems Incorporated and its
 * suppliers and may be covered by U.S. and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from Adobe Systems Incorporated.
 */

@admin-font-family: "Adobe Clean", Verdana, sans-serif;

.aem-ScreensPlayer-admin {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 50px;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
}

.aem-ScreensPlayer-admin-trigger {
  position: fixed;
  padding: 0;
  margin: 0;
  left: 0;
  top: 0;
  width: 100px;
  height: 20px;
  background: rgba(0, 0, 0, 0.01);
  border: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 1000;

  &:focus {
    outline: none;
  }

  &[disabled] {
    display: none;
  }
}

.aem-ScreensPlayer-admin-inner {
  display: block;
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  padding: 65px 15px 15px 15px;
  background: #ffffff;
  border-radius: 3px;
  font-family: @admin-font-family;

  hr {
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    display: block;
    margin: 6px 15px;
    border: 1px solid #F3F3F3;
  }

}

.aem-ScreensPlayer-admin-header {
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../../shared/res/aem_logo.png);
  background-repeat: no-repeat;
  background-size: 26px;
  background-position: 1rem center;
  padding-left: 60px;
  font-size: 20px;
  line-height: 50px;
  color: #323232;
}

ul.aem-ScreensPlayer-admin-menu {
  float: left;
  display: inline-block;
  padding: 0;
  margin: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;

  li {
    list-style: none;
    margin: 0;
    padding-left: 1rem;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    text-align: right;
    border-right: 2px solid transparent;

    color: #707070;
    text-decoration: none;
    display: block;
    padding-right: 10px;
    cursor: pointer;

    &:hover {
      color: #323232;
    }

    &.active {
      color: #323232;
      border-right: 2px solid #000000;
    }
  }

}

.aem-ScreensPlayer-admin-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  cursor: pointer;

  &:before {
    display: block;
    width: 60px;
    height: 60px;
    content: '';
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgOTYwIDk2MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTExLDE2NmwzMTMsMzE0TDExLDc5NGMtMTQsMTQtMTQsMzYsMCw1MGwxMDUsMTA2YzE0LDE0LDM3LDE0LDUxLDBsMzEzLTMxNGwzMTQsMzE0YzE0LDE0LDM2LDE0LDUwLDBsMTA2LTEwNmMxNC0xNCwxNC0zNiwwLTUwTDYzNiw0ODBsMzE0LTMxNGMxNC0xNCwxNC0zNiwwLTUwTDg0NCwxMGMtMTQtMTQtMzYtMTQtNTAsMEw0ODAsMzI0TDE2NywxMGMtMTQtMTQtMzctMTQtNTEsMEwxMSwxMTZDLTMsMTMwLTMsMTUyLDExLDE2NnoiLz48L3N2Zz4=') no-repeat center;
  }

}

.aem-ScreensPlayer-admin-content {
  display: block;
  width: auto;
  height: 100%;
  background-color: #FBFBFB;
  overflow-x: hidden;
  overflow-y: auto;
  border: 2px solid #f3f3f3;
  border-radius: 5px;
}

.aem-ScreensPlayer-admin-view {
  padding: 0 1rem 1rem 1rem;
  font-size: 17px;
  color: #323232;

  h1 {
    margin: 0.5rem 0 0 0;
    font-size: 22px;
    color: #323232;
  }

  h2 {
    margin: 0.5rem 0 0 0;
    font-size: 17px;
    color: #323232;
  }
  h3 {
    margin: 0;
    font-weight: normal;
    font-size: 17px;
    color: #707070;
  }

  input {
    font-size: 16px;
    width: 100%;
    color: #666;
  }
  input[type=checkbox] {
    width: inherit;
  }

  button {
    font-size: 16px;
    margin: 4px 4px 0 0;
  }

  input, button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", Arial, sans-serif;
  }

}

.aem-ScreensPlayer-admin-channelsview-channels {
  width: 100%;
  margin-top: 10px;
  th {
    text-align: left;
    border-bottom: 1px solid #f3f3f3;
  }
  td {
    border-bottom: 1px solid #f3f3f3;
    line-height: 24px;
  }
}

.aem-ScreensPlayer-admin-configurationView-preferences {

  width: 100%;
  td {
    padding-left: 10px;
  }
  td:first-child {
    width: 10%;
    text-align: right;
    padding-left: 0;
  }

}

.aem-ScreensPlayer-admin-channel-icon {

  &:after {
    width: 18px;
    height: 18px;
    content: '';
    background-repeat: no-repeat;
    display: inline-block;
  }

  &:after { // https://icons.corp.adobe.com:8443/content/athena/clients/cloud-ui/collections/clouduigeneral/icons/cloud/assets/Cloud.svg
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiICB2aWV3Qm94PSIwIDAgMTE1MiAxMTUyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMTUyIDExNTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZD0iTTk2MCw0ODBjLTAuMi0yMzctMTI3LjQtMzM2LTMxMi0zMzZjLTEzMC4zLDAtMjEyLjgsNjEuNC0yNzAuNiwxNTAuOWMtMzkuNS04LjQtODEuNy05LjUtMTI1LjItMS4zDQoJQzEwMy40LDMyMS42LDAsNDc4LjcsMCw2MjRzMTIxLjIsMzM0LDI4OCwzMzZoNjI0YzEzMi42LDAsMjQwLTEwNy41LDI0MC0yNDB2LTQ4QzExNTIsNTY2LDEwNjYsNDgwLDk2MCw0ODB6IE05MTIsODE2SDI4OA0KCWMtMTA4LDAtMTQ0LTEyMC0xNDQtMTkyYzAtOTIuNiw3NS40LTE5MiwxNjgtMTkyYzExLjksMCwyMy44LDEuMiwzNS4zLDMuOGw4MC45LDE3LjNjOS43LDIuMSwxOS44LTIuMSwyNS4yLTEwLjRsNDQuOS02OS41DQoJYzE5LjEtMjkuNSwzOS4yLTUwLjQsNjEuNC02My43YzIzLjgtMTQuMyw1Mi43LTIxLjMsODguMi0yMS4zYzU3LjEsMCw5OC43LDEyLjYsMTIzLjgsMzcuNGMzNi40LDM2LjEsNDQuMiwxMDQsNDQuMiwxNTQuNnY5Ng0KCWMwLDI2LjUsMjEuNSw0OCw0OCw0OGg0OGM1MywwLDk2LDQzLDk2LDk2Uzk2NSw4MTYsOTEyLDgxNnoiLz4NCjwvc3ZnPg0K');
  }

  &.is-loadedFromCache:after { // https://icons.corp.adobe.com:8443/content/athena/clients/cloud-ui/collections/clouduigeneral/icons/datacheck/assets/DataCheck.svg
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxMTUyIDExNTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExNTIgMTE1MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBkPSJNNTI4LDBjMjM4LjYsMCw0MzIsNzUuMiw0MzIsMTY4Uzc2Ni42LDMzNiw1MjgsMzM2Yy0yMzguNiwwLTQzMi03NS4yLTQzMi0xNjhTMjg5LjQsMCw1MjgsMHoiLz4NCgk8cGF0aCBkPSJNNTY0LjcsNjIzLjNjOC42LTEwLjcsMTcuOS0yMSwyNy44LTMwLjhjMzUuMi0zNS4zLDc2LjItNjIuOSwxMjItODIuM2M0Ny40LTIwLDk3LjctMzAuMiwxNDkuNS0zMC4yDQoJCWMzMC42LDAsNjAuNywzLjYsODkuOSwxMC42YzQtNy42LDYuMS0xNS4yLDYuMS0yMi42VjMwMGgtNC40QzkwMCwzODQsNzQ1LjYsNDMyLDUyOCw0MzJjLTIxNy43LDAtMzcyLTQ4LTQyNy42LTEzMkg5NnYxNjgNCgkJYzAsNzIsMTkzLjQsMTU2LDQzMiwxNTZDNTQwLjQsNjI0LDU1Mi43LDYyMy44LDU2NC43LDYyMy4zeiIvPg0KCTxwYXRoIGQ9Ik01MTAuMiwxMDEzLjVDNDkwLjEsOTY2LjEsNDgwLDkxNS44LDQ4MCw4NjRjMC00OS45LDkuNC05OC4zLDI4LTE0NC4xQzMwMC45LDcxNywxNTQuMyw2NjkuNCwxMDAuNCw1ODhIOTZ2MzEyDQoJCWMwLDcyLDE5My40LDE1Niw0MzIsMTU2YzEuMSwwLDIuMywwLDMuNCwwQzUyMy41LDEwNDIuMyw1MTYuNCwxMDI4LjIsNTEwLjIsMTAxMy41eiIvPg0KCTxwYXRoIGQ9Ik04NjQsNTc2Yy0xNTkuMSwwLTI4OCwxMjktMjg4LDI4OGMwLDE1OS4xLDEyOC45LDI4OCwyODgsMjg4YzE1OSwwLDI4OC0xMjguOSwyODgtMjg4QzExNTIsNzA1LDEwMjMsNTc2LDg2NCw1NzZ6DQoJCSBNNzgzLjUsMTAzNS41bC0xMTUtMTE1Yy00LjctNC43LTQuNy0xMi4zLDAtMTdsNDMtNDNjNC43LTQuNywxMi4zLTQuNywxNywwTDc5Miw5MjRsMjA3LjUtMjA3LjVjNC43LTQuNywxMi4zLTQuNywxNywwbDQzLDQzDQoJCWM0LjcsNC43LDQuNywxMi4zLDAsMTdsLTI1OSwyNTlDNzk1LjgsMTA0MC4yLDc4OC4yLDEwNDAuMiw3ODMuNSwxMDM1LjV6Ii8+DQo8L2c+DQo8L3N2Zz4=');
  }

  &.is-cacheUnavailable:after { // https://icons.corp.adobe.com:8443/content/athena/clients/cloud-ui/collections/clouduigeneral/icons/dataunavailable/assets/DataUnavailable.svg
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxMTUyIDExNTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExNTIgMTE1MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBkPSJNNTI4LDBjMjM4LjYsMCw0MzIsNzUuMiw0MzIsMTY4Uzc2Ni42LDMzNiw1MjgsMzM2Yy0yMzguNiwwLTQzMi03NS4yLTQzMi0xNjhTMjg5LjQsMCw1MjgsMHoiLz4NCgk8cGF0aCBkPSJNNTY0LjcsNjIzLjNjOC42LTEwLjcsMTcuOS0yMSwyNy44LTMwLjhjMzUuMi0zNS4zLDc2LjItNjIuOSwxMjItODIuM2M0Ny40LTIwLDk3LjctMzAuMiwxNDkuNS0zMC4yDQoJCWMzMC42LDAsNjAuNywzLjYsODkuOSwxMC42YzQtNy42LDYuMS0xNS4yLDYuMS0yMi42VjMwMGgtNC40QzkwMCwzODQsNzQ1LjYsNDMyLDUyOCw0MzJjLTIxNy43LDAtMzcyLTQ4LTQyNy42LTEzMkg5NnYxNjgNCgkJYzAsNzIsMTkzLjQsMTU2LDQzMiwxNTZDNTQwLjQsNjI0LDU1Mi43LDYyMy44LDU2NC43LDYyMy4zeiIvPg0KCTxwYXRoIGQ9Ik01MTAuMiwxMDEzLjVDNDkwLjEsOTY2LjEsNDgwLDkxNS44LDQ4MCw4NjRjMC00OS45LDkuNC05OC4zLDI4LTE0NC4xQzMwMC45LDcxNywxNTQuMyw2NjkuNCwxMDAuNCw1ODhIOTZ2MzEyDQoJCWMwLDcyLDE5My40LDE1Niw0MzIsMTU2YzEuMSwwLDIuMywwLDMuNCwwQzUyMy41LDEwNDIuMyw1MTYuNCwxMDI4LjIsNTEwLjIsMTAxMy41eiIvPg0KCTxwYXRoIGQ9Ik04NjQsNTc2Yy0xNTkuMSwwLTI4OCwxMjktMjg4LDI4OGMwLDE1OS4xLDEyOC45LDI4OCwyODgsMjg4YzE1OSwwLDI4OC0xMjguOSwyODgtMjg4QzExNTIsNzA1LDEwMjMsNTc2LDg2NCw1NzZ6DQoJCSBNODMxLjYsNjYyLjVjNDcuNy03LjMsOTIuNywxLjgsMTMwLjYsMjIuNmM2LjksMy44LDcuOSwxMy41LDIuMywxOUw3MDQuMSw5NjQuNWMtNS42LDUuNi0xNS4yLDQuNi0xOS0yLjMNCgkJYy0yMC44LTM3LjktMjkuOS04My0yMi42LTEzMC43QzY3NS44LDc0NS43LDc0NS44LDY3NS43LDgzMS42LDY2Mi41eiBNODk2LjYsMTA2NS41Yy00Ny43LDcuNC05Mi45LTEuOC0xMzAuOC0yMi42DQoJCWMtNi45LTMuOC03LjktMTMuNS0yLjMtMTlsMjYwLjMtMjYwLjNjNS42LTUuNiwxNS4yLTQuNiwxOSwyLjNjMjAuOSwzNy44LDMwLDgyLjksMjIuNywxMzAuNg0KCQlDMTA1Mi4zLDk4Mi4yLDk4Mi4zLDEwNTIuMiw4OTYuNiwxMDY1LjV6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==');
  }

  &.is-loadedFromServer:after { // https://icons.corp.adobe.com:8443/content/athena/clients/cloud-ui/collections/clouduigeneral/icons/DataRemove/assets/DataRemove_24.svg
    opacity: 0.1;
  }

}