view release on metacpan or  search on metacpan

beamer-reveal-example_files/libs/revealjs/plugin/notes/speaker-view.html  view on Meta::CPAN

	  line-height: 34px;
	  padding: 0 10px;
	  text-shadow: none;
	  background: rgba( 220, 220, 220, 0.8 );
	  color: #222;
	  font-size: 14px;
      }

      .overlay-element.interactive:hover {
	  background: rgba( 220, 220, 220, 1 );
      }

      #current-slide {
	  position: absolute;
	  width: 60%;
	  height: 100%;
	  top: 0;
	  left: 0;
	  padding-right: 0;
      }

      #upcoming-slide {
	  position: absolute;
	  width: 40%;
	  height: 40%;
	  right: 0;
	  top: 0;
      }

      /* Speaker controls */
      #speaker-controls {
	  position: absolute;
	  top: 40%;
	  right: 0;
	  width: 40%;
	  height: 60%;
	  overflow: auto;
	  font-size: 18px;
      }

      .speaker-controls-time.hidden,
      .speaker-controls-notes.hidden {
	  display: none;
      }

      .speaker-controls-time .label,
      .speaker-controls-pace .label,
      .speaker-controls-notes .label {
	  text-transform: uppercase;
	  font-weight: normal;
	  font-size: 0.66em;
	  color: #666;
	  margin: 0;
      }

      .speaker-controls-time, .speaker-controls-pace {
	  border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
	  margin-bottom: 10px;
	  padding: 10px 16px;
	  padding-bottom: 20px;
	  cursor: pointer;
      }

      .speaker-controls-time .reset-button {
	  opacity: 0;
	  float: right;
	  color: #666;
	  text-decoration: none;
      }
      .speaker-controls-time:hover .reset-button {
	  opacity: 1;
      }

      .speaker-controls-time .timer,
      .speaker-controls-time .clock {
	  width: 50%;
      }

      .speaker-controls-time .timer,
      .speaker-controls-time .clock,
      .speaker-controls-time .pacing .hours-value,
      .speaker-controls-time .pacing .minutes-value,
      .speaker-controls-time .pacing .seconds-value {
	  font-size: 1.9em;
      }

      .speaker-controls-time .timer {
	  float: left;
      }

      .speaker-controls-time .clock {
	  float: right;
	  text-align: right;
      }

      .speaker-controls-time span.mute {
	  opacity: 0.3;
      }

      .speaker-controls-time .pacing-title {
	  margin-top: 5px;
      }

      .speaker-controls-time .pacing.ahead {
	  color: blue;
      }

      .speaker-controls-time .pacing.on-track {
	  color: green;
      }

      .speaker-controls-time .pacing.behind {
	  color: red;
      }

      .speaker-controls-notes {
          display: flex !important;
          flex-direction: column !important;
 	  height: 100% !important;
	  padding: 10px 16px;
      }
      
      .speaker-controls-notes .value {
	  flex: 1 !important;
	  display: flex !important;
 	  align-items: center !important;
 	  justify-content: center !important;
 	  overflow: hidden !important;
	  margin-top: 5px;
	  line-height: 1.4;
	  font-size: 1.2em;
      }
      
      .speaker-controls-notes .value img {
 	  max-width: 100% !important;
 	  max-height: 100% !important;
 	  object-fit: contain !important;
      }
      
      /* Layout selector */
      #speaker-layout {
	  position: absolute;
	  top: 10px;
	  right: 10px;
	  color: #222;
	  z-index: 10;
      }
      #speaker-layout select {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  top: 0;
	  left: 0;
	  border: 0;
	  box-shadow: 0;
	  cursor: pointer;
	  opacity: 0;

	  font-size: 1em;
	  background-color: transparent;

	  -moz-appearance: none;
	  -webkit-appearance: none;
	  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      }

      #speaker-layout select:focus {
	  outline: none;
	  box-shadow: none;
      }

      .clear {
	  clear: both;
      }

      /* Speaker layout: Wide - removed by DMW */

      /* Speaker layout: Tall */
      body[data-speaker-layout="tall"] #current-slide,
      body[data-speaker-layout="tall"] #upcoming-slide {
	  width: 45%;
	  height: 50%;
	  padding: 6px;
      }

      body[data-speaker-layout="tall"] #current-slide {
	  top: 0;
	  left: 0;
      }

      body[data-speaker-layout="tall"] #upcoming-slide {
	  top: 50%;
	  left: 0;
      }

      body[data-speaker-layout="tall"] #speaker-controls {
	  padding-top: 40px;
	  top: 0;
	  left: 45%;
	  width: 55%;
	  height: 100%;
	  font-size: 1.25em;
      }
      
      /* Speaker layout: Notes only */
      body[data-speaker-layout="notes-only"] #current-slide,
      body[data-speaker-layout="notes-only"] #upcoming-slide {
	  display: none;
      }

      body[data-speaker-layout="notes-only"] #speaker-controls {
	  padding-top: 40px;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;