view release on metacpan or  search on metacpan

quarto/preso_files/libs/revealjs/plugin/notes/speaker-view.html  view on Meta::CPAN

      .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 */
      body[data-speaker-layout="wide"] #current-slide,
      body[data-speaker-layout="wide"] #upcoming-slide {
	  width: 50%;
	  height: 45%;
	  padding: 6px;
      }

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

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

      body[data-speaker-layout="wide"] #speaker-controls {
	  top: 45%;
	  left: 0;
	  width: 100%;
	  height: 50%;
	  font-size: 1.25em;
      }

      /* 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 {